如何在页面加载之前在jQuery Mobile中禁用Ajax？

Question

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. 我确实发现，如果我禁用ajax，页面会加载广告。 This only works on the second page I load because I click a link with the tag... 这仅适用于我加载的第二页，因为我单击带有标记的链接...

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的页面。

Answer 1

Check-out the docs for binding to the mobileinit event: 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 mobileinit event: 以下是绑定到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 mobileinit event handler, then the jQuery Mobile js file (this is last so the event handler for mobileinit will be set before the event is fired). 首先是jQuery Core（所以.bind()将可用），然后是mobileinit事件处理程序，然后是jQuery Mobile js文件（这是最后一个，因此在触发事件之前将设置mobileinit的事件处理程序）。

You can test that your current mobileinit event handler is not firing by putting an alert in the function. 您可以通过在函数中放置alert来测试当前的mobileinit事件处理程序是否未触发。

Answer 2

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). 与其他jQuery项目（如jQuery和jQuery UI）不同，jQuery Mobile会在加载后立即自动应用许多标记增强功能（早在document.ready事件触发之前）。 These enhancements are applied based on jQuery Mobile's default settings, which are designed to work with common scenarios. 这些增强功能基于jQuery Mobile的默认设置应用，这些设置旨在用于常见场景。 If changes to the settings are needed, they are easy to configure. 如果需要更改设置，则可以轻松配置。

The mobileinit event mobileinit事件

When jQuery Mobile starts, it triggers a mobileinit event on the document object. 当jQuery Mobile启动时，它会触发文档对象上的mobileinit事件。 To override default settings, bind to 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. 由于mobileinit事件是立即触发的，因此您需要在加载jQuery Mobile之前绑定事件处理程序。 Link to your JavaScript files in the following order: 按以下顺序链接到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;
});

Answer 3

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. 指向其他域或具有rel =“external”，data-ajax =“false”或目标属性的链接将不会加载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. 两个属性（rel =“external”和data-ajax =“false”）具有相同的效果，但是在链接到另一个站点或域时应使用不同的语义：rel =“external”，而data-ajax =“ false“对于简单地选择域中的页面通过Ajax加载非常有用。

Answer 4

禁用每页解决方案可以很好地使用Anchor标记上的data-ajax =“false”

如何在页面加载之前在jQuery Mobile中禁用Ajax？

问题描述

4 个解决方案

解决方案1
60 已采纳 2011-12-30 22:08:35

解决方案2
5 2012-12-17 18:01:16

解决方案3
1 2013-02-13 22:33:14

解决方案4
0 2013-04-29 20:44:27

如何在页面加载之前在jQuery Mobile中禁用Ajax？

问题描述

4 个解决方案

解决方案1 60 已采纳 2011-12-30 22:08:35

解决方案2 5 2012-12-17 18:01:16

解决方案3 1 2013-02-13 22:33:14

解决方案4 0 2013-04-29 20:44:27

解决方案1
60 已采纳 2011-12-30 22:08:35

解决方案2
5 2012-12-17 18:01:16

解决方案3
1 2013-02-13 22:33:14

解决方案4
0 2013-04-29 20:44:27