web-dev-qa-db-fra.com

Comment désactiver Ajax dans jQuery Mobile avant le chargement de la page?

Sur mon site mobile. J'ai essayé de charger des annonces Adsense Mobile, mais elles continuent à occuper la page entière après le chargement de la page.

J'ai compris que si je désactivais ajax, la page se chargerait correctement avec l'annonce ensemble. Cela ne fonctionne que sur la deuxième page que je charge car je clique sur un lien avec la balise ...

data-ajax="false"

Ce qui fait que la page suivante se charge parfaitement.

Problème: La première page chargée sera écrasée par l'annonce adsense car ajax est activé (je pense).

Fondamentalement, la première partie de ma page ressemble à ceci ...

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

J'ai essayé de désactiver ajax dans le code, mais je ne pense pas que ce soit parce que l'annonce occupe toujours la page entière ...

Je pensais que je pourrais peut-être commencer le visiteur à une certaine page et le rediriger vers une page qui n'est pas ajax.

javascriptjqueryhtmlajaxjquery-mobile
29
Joe

Récupérez les documents pour la liaison à l'événement mobileinit: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html

Plus précisément ce bit:

Étant donné que l'événement mobileinit est déclenché immédiatement après son exécution, vous devrez lier votre gestionnaire d'événements avant le chargement de jQuery Mobile.

Voici le format approprié pour la liaison à l'événement 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>

D'abord le jQuery Core (donc .bind() sera disponible), puis le gestionnaire d'événements mobileinit, puis le fichier jQuery Mobile js (c'est le dernier donc le gestionnaire d'événements pour mobileinit sera défini avant le déclenchement de l'événement).

Vous pouvez tester que votre gestionnaire d'événements mobileinit actuel ne se déclenche pas en plaçant un alert dans la fonction.

60
Jasper

La documentation jQuery Mobile mise à jour est ici: http://jquerymobile.com/test/docs/api/globalconfig.html

Contrairement à d'autres projets jQuery, tels que jQuery et jQuery UI, jQuery Mobile applique automatiquement de nombreuses améliorations de balisage dès son chargement (bien avant le déclenchement de l'événement document.ready). Ces améliorations sont appliquées en fonction des paramètres par défaut de jQuery Mobile, qui sont conçus pour fonctionner avec des scénarios courants. Si des modifications des paramètres sont nécessaires, elles sont faciles à configurer.

L'événement mobileinit

Lorsque jQuery Mobile démarre, il déclenche un événement mobileinit sur l'objet document. Pour remplacer les paramètres par défaut, liez à mobileinit.

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

Étant donné que l'événement mobileinit est déclenché immédiatement, vous devrez lier votre gestionnaire d'événements avant le chargement de jQuery Mobile. Lien vers vos fichiers JavaScript dans l'ordre suivant:

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

Vous pouvez remplacer les paramètres par défaut en étendant l'objet $ .mobile à l'aide de la méthode $ .extend de jQuery.

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

Vous pouvez également les définir à l'aide de la notation de propriété d'objet.

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

Une page utile pour comprendre le comportement jquery mobile ajax

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

Pour activer les transitions de page animées, tous les liens qui pointent vers une page externe (ex. Products.html) seront chargés via Ajax.

Les liens qui pointent vers d'autres domaines ou qui ont des attributs rel = "external", data-ajax = "false" ou cible ne seront pas chargés avec Ajax. Au lieu de cela, ces liens entraîneront une actualisation de la page complète sans transition animée. Les deux attributs (rel = "external" et data-ajax = "false") ont le même effet, mais une signification sémantique différente: rel = "external" doit être utilisé lors de la liaison à un autre site ou domaine, tandis que data-ajax = " false "est utile pour simplement choisir qu'une page de votre domaine soit chargée via Ajax.

1
user1283182

La désactivation d'une solution par page fonctionne très bien avec data-ajax = "false" sur la balise d'ancrage

0
user1293466