Javascript 如何在页面加载前禁用 jQuery Mobile 中的 Ajax？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8684234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To Disable Ajax In jQuery Mobile Before Page Load?
提问by Nick Chubb
On my mobile website. I've been trying to load Adsense Mobile ads, but they continue to take up the entire page after the page loads itself.
在我的移动网站上。我一直在尝试加载 Adsense 移动广告，但在页面加载后它们继续占据整个页面。
I did figure out that if I disable ajax the page would load fine with the ad together. This only works on the second page I load because I click a link with the tag...
我确实发现，如果我禁用 ajax，页面将与广告一起加载得很好。这仅适用于我加载的第二页，因为我单击了带有标签的链接...
data-ajax="false"
Which makes the next page load perfectly.
这使得下一页完美加载。
Problem: The first page loaded will be overwritten by the adsense ad because ajax is enabled (I think).
问题：加载的第一页将被 Adsense 广告覆盖，因为启用了 ajax（我认为）。
Basically the first part of my page looks like this...
基本上我页面的第一部分看起来像这样......
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
<script language="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
<body>
<div data-role="header">
<h1>Angry Birds Cheats</h1>
</div>
<div data-role="content">
<div>
<script type="text/javascript"><!--
// XHTML should not attempt to parse these strings, declare them CDATA.
/* <![CDATA[ */
window.googleAfmcRequest = {
client: '',
format: '',
output: '',
slotname: '',
};
/* ]]> */
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_afmc_ads.js"></script>
</div>
I did try to disable ajax in the code, but I don't think it is because the ad still takes up the entire page...
我确实尝试在代码中禁用ajax，但我认为不是因为广告仍然占据了整个页面......
I was thinking that maybe I could start the visitor at a certain page and redirect them to a page that is non-ajax.
我在想，也许我可以在某个页面启动访问者并将他们重定向到非 ajax 的页面。
回答by Jasper
Check-out the docs for binding to the mobileinitevent: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html
检查绑定到mobileinit事件的文档：http: //jquerymobile.com/demos/1.0/docs/api/globalconfig.html
Specifically this bit:
具体这一点：
Because the mobileinit event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded.
因为 mobileinit 事件在执行时立即触发，所以您需要在加载 jQuery Mobile 之前绑定您的事件处理程序。
Here is the proper format for binding to the mobileinitevent:
这是绑定到mobileinit事件的正确格式：
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
First the jQuery Core (so .bind()will be available), then the mobileinitevent handler, then the jQuery Mobile js file (this is last so the event handler for mobileinitwill be set before the event is fired).
首先是 jQuery Core（所以.bind()将可用），然后是mobileinit事件处理程序，然后是 jQuery Mobile js 文件（这是最后一个，因此mobileinit将在触发事件之前设置事件处理程序）。
You can test that your current mobileinitevent handler is not firing by putting an alertin the function.
您可以mobileinit通过alert在函数中放置来测试您当前的事件处理程序是否未触发。
回答by bluescrubbie
The updated jQuery Mobile documentation is here: http://jquerymobile.com/test/docs/api/globalconfig.html
更新的 jQuery Mobile 文档在这里：http: //jquerymobile.com/test/docs/api/globalconfig.html
Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before the document.ready event fires). These enhancements are applied based on jQuery Mobile's default settings, which are designed to work with common scenarios. If changes to the settings are needed, they are easy to configure.
与其他 jQuery 项目（例如 jQuery 和 jQuery UI）不同，jQuery Mobile 一加载就自动应用许多标记增强功能（早在 document.ready 事件触发之前）。这些增强功能是基于 jQuery Mobile 的默认设置应用的，这些设置旨在处理常见场景。如果需要更改设置，它们很容易配置。
The mobileinit event
mobileinit 事件
When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind to mobileinit.
当 jQuery Mobile 启动时，它会在文档对象上触发 mobileinit 事件。要覆盖默认设置，请绑定到 mobileinit。
$(document).on("mobileinit", function(){
//apply overrides here
});
Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:
因为 mobileinit 事件是立即触发的，所以您需要在加载 jQuery Mobile 之前绑定您的事件处理程序。按以下顺序链接到您的 JavaScript 文件：
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
You can override default settings by extending the $.mobile object using jQuery's $.extend method.
您可以通过使用 jQuery 的 $.extend 方法扩展 $.mobile 对象来覆盖默认设置。
$(document).on("mobileinit", function(){
$.extend( $.mobile , {
foo: bar
});
});
Alternatively, you can set them using object property notation.
或者，您可以使用对象属性表示法设置它们。
$(document).on("mobileinit", function(){
$.mobile.foo = bar;
});
回答by user1283182
A helpful page to understand jquery mobile ajax behavior
一个了解 jquery mobile ajax 行为的有用页面
http://jquerymobile.com/test/docs/pages/page-links.html
http://jquerymobile.com/test/docs/pages/page-links.html
To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax.
为了启用动画页面转换，所有指向外部页面（例如 products.html）的链接都将通过 Ajax 加载。
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax.
Ajax 不会加载指向其他域或具有 rel="external"、data-ajax="false" 或目标属性的链接。相反，这些链接将导致没有动画过渡的整页刷新。这两个属性（rel="external" 和 data-ajax="false"）具有相同的效果，但语义不同：链接到另一个站点或域时应使用 rel="external"，而 data-ajax=" false”对于简单地选择通过 Ajax 加载域中的页面非常有用。
回答by user1293466
Disabling a per-page solution work great with data-ajax="false" on the Anchor tag
禁用每页解决方案非常适用于锚标记上的 data-ajax="false"
