分享程序员开发的那些事...
更新时间：2021-12-09 13:05:28
本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.6节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
默认情况下，jQuery Mobile会将所有的链接转换成AJAX请求，只要它们指向的文件在同一个域中。然而，可能会有想避免这种行为的情况。比如，你可能在自己的网站的某部分使用了不同的移动端JavaScript框架，在尝试用AJAX加载时产生了冲突。代码清单9-7演示了多种在链接上禁用AJAX加载行为的方法。
代码清单9-7 指示不通过AJAX加载而提供外部页面的链接
00 <!DOCTYPE html>
01 <html>
02 <head>
03 <title>Linking Without AJAX</title>
04 <meta name="viewport"
05 content="width=device-width, initial-scale=1">
06 <link rel="stylesheet" href=
07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
08 <script type="text/javascript"
09 src="http://code.jquery.com/jquery-1.7.1.min.js">
10 </script>
11 <script type="text/javascript" src=
12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
13 </script>
14 </head>
15 <body>
16
17 <div data-role="page">
18
19 <div data-role="header">
20 <h1>Linking Without AJAX</h1>
21 </div>
22
23 <div data-role="content">
24 <p><a href="04b-link.html" data-ajax="false">Link to an
25 external file</a></p>
26 <!-- OR:
27 <p><a href="04b-link.html" rel="external">Link to an
28 external file</a></p>
29 -->
30 </div>
31
32 </div>
33
34 </body>
35 </html>
在第24行，data-ajax属性用来指定是否使用AJAX。默认值是true。如果设置为false，将会禁用AJAX。
第27行提供了rel="external"属性。在jQuery Mobile中行为是一样的：禁用AJAX。这个标记的依据是HTML的建议标准。然而，使用这个标记会有一些副作用。有些人可能会指定一些CSS规则，给指向外部地址的链接赋予不同的外观。例如，可能会在这些链接上添加一个小图标1。