如何在页面加载之前禁用jQuery移动Ajax

How To Disable Ajax In jQuery Mobile Before Page Load?

本文关键字：jQuery 移动 Ajax 加载      更新时间：2023-09-26

在我的手机网站上。我一直在尝试加载Adsense Mobile广告，但它们在页面加载后继续占据整个页面。

我确实发现，如果我禁用ajax，页面将加载良好的广告在一起。这只适用于我加载的第二个页面，因为我点击了带有标签的链接…

data-ajax="false"

这使得下一页加载完美。

问题:加载的第一页将被adsense广告覆盖，因为ajax是启用的(我认为)。

基本上我的页面的第一部分看起来像这样…

<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>

我确实尝试在代码中禁用ajax，但我不认为这是因为广告仍然占用整个页面…

我在想，也许我可以在某个页面开始访问者，并将他们重定向到一个非ajax的页面。

查看与mobileinit事件绑定的文档:http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html

特别是这一点:

由于mobileinit事件在执行时立即触发，你需要在jQuery Mobile加载之前绑定你的事件处理程序。

以下是绑定到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>

首先是jQuery核心(因此.bind()将可用)，然后是mobileinit事件处理程序，然后是jQuery Mobile js文件(这是最后一个，因此mobileinit的事件处理程序将在事件被触发之前设置)。

您可以通过在函数中放置alert来测试当前mobileinit事件处理程序是否未触发。

更新后的jQuery Mobile文档如下:http://jquerymobile.com/test/docs/api/globalconfig.html

与其他jQuery项目(如jQuery和jQuery UI)不同，jQuery Mobile在加载时(远早于文档)自动应用许多标记增强功能。Ready事件触发)。这些增强是基于jQuery Mobile的默认设置来应用的，这些默认设置是设计用来处理常见场景的。如果需要更改设置，它们很容易配置。

mobileinit事件

当jQuery Mobile启动时，它会触发文档对象上的mobileinit事件。要覆盖默认设置，绑定到mobileinit。

$(document).on("mobileinit", function(){
  //apply overrides here
});

因为mobileinit事件是立即触发的，你需要在jQuery Mobile加载之前绑定你的事件处理程序。按以下顺序链接到你的JavaScript文件:

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

你可以通过扩展$来覆盖默认设置。移动对象使用jQuery的$。扩展方法。

$(document).on("mobileinit", function(){
  $.extend(  $.mobile , {
    foo: bar
  });
});

或者，您可以使用对象属性表示法设置它们。

$(document).on("mobileinit", function(){
  $.mobile.foo = bar;
});

一个了解jquery移动ajax行为的有用页面

http://jquerymobile.com/test/docs/pages/page-links.html

要启用动画页面转换，所有指向外部页面(例如products.html)的链接都将通过Ajax加载。

指向其他域或具有rel="external"、data-ajax="false"或目标属性的链接将不会被Ajax加载。相反，这些链接将导致整个页面刷新，没有动画过渡。这两个属性(rel="external"和data-ajax="false")具有相同的效果，但语义含义不同:rel="external"应该在链接到另一个站点或域时使用，而data-ajax="false"用于简单地选择不通过Ajax加载域内的页面。

禁用逐页解决方案对于锚标记上的data-ajax="false"非常有效

相关文章：