9.6 技巧：不使用AJAX而链接至外部页面
默认情况下，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 05 content="width=device-width, initial-scale=1"> 06 <link 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">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。
1即属性rel="external"表示了两种行为。这样的话，如果更改了其中一种行为的逻辑，就有可能破坏另外一种行为。比如这里，链接上的小图标表示指向外部页面，但还是想通过 AJAX 来加载，这样就和jQuery Mobile 的初衷不符了。——译者注
相关文章
精彩导读
热门资讯
关注我们
