2012-02-21 3 views
12

am en utilisant jquery mobile 1.0Jquery mobile: rediriger vers une autre page avant le chargement

Je veux rediriger de first.html à otherPage.html sans montrer le contenu de first.html

$("#pageId").live("pagebeforecreate", function(event) {     

    window.location.href = "otherPage.html";    

}); 

-i essayé presque tous les cas, mais pas réussi. Le first.html est affiché pendant un instant.

Puis, j'ai essayé avec événement « pagebeforeload », mais il isnt déclenché

$(document).bind("pagebeforeload", function(e, data){ 

     console.log("pagebeforeload starting"); // NO LOGGING HAPPENING 
     window.location.href = "otherPage.html"; 

     e.preventDefault(); 

     data.deferred.resolve(data.absUrl, data.options, response.page); 

}); 

$(document).bind("pageload", function(e, data){ 
    console.log("Page successfully loaded into DOM..."); // NO LOGGING HAPPENING 
}); 

-Suis pas beaucoup clair sur cet événement & n'a pas trouvé un exemple pratique pour elle. -Can n'importe qui aidez plz!

+0

Avez-vous trouvé la réponse .. J'ai besoin de la solution .. Merci d'avance .. –

+0

Salut. En fait, je l'ai fait il y a presque 1 an. Mais va chercher et laissez-vous savoir. –

+0

Merci .. s'il vous plaît laissez-moi savoir si vous le trouvez .. Merci encore –

Répondre

3

L'événement pagebeforeload est uniquement déclenché lorsque des pages externes sont chargées dans:

Chaque fois qu'une page externe est chargée dans l'application DOM, 2 événements sont déclenchés. Le premier est pagebeforeload. Le 2ème événement sera soit pageload, soit pageloadfailed.

Ma seule idée de contourner ce serait de charger le contenu de la page de first.html de manière asynchrone, ce qui est idéal parce que vous finissez par faire 2 requêtes http pour la même page. Cependant, cela vous donnera la possibilité d'appeler seulement le premier-contents.html si nécessaire, sinon vous pouvez rediriger vers otherPage.html sans rien afficher. par exemple:

<script> 
    someCondition=true; 
    if(someCondition) { 
     window.location.href = "otherPage.html"; 
    } else { 
     $(document).ready(function() { 
      $('body').load('first-content.html', function() { 
       //other stuff after the contents have loaded: like the rest of your jquery relating to first.html 
      }); 
     }); 
    } 
</script> 

Assurez-vous que les balises de corps sont vides dans la first.html page.

+1

Je peux seulement commenter ma propre réponse atm; mais j'ai essayé la réponse de @ Endophage avant de poster le mien mais il affiche toujours la page avant de la rediriger sur les appareils mobiles pour une raison quelconque, en particulier sur le premier chargement (c.-à-pas de cache) et de plus grandes tailles. –

+0

Thnx pour répondre. Je veux seulement un événement dans lequel la redirection se déclenchera et le chargement de la page s'arrêtera. Sinon, il est plus facile de montrer/cacher la page. –

1

Avez-vous essayé simplement de ne pas utiliser un événement. Le code JS sera exécuté comme il est rencontré, donc assurez-vous que votre code conditionnel est en haut de la page (dans la tête quelque part) devrait être suffisant.

<html> 
<head> 
<script> 
    if (condition) 
    { 
    window.location.href = "otherPage.html"; 
    } 
</script> 
<!-- rest of page --> 
+0

thnx pour répondre.Mais ce n'est pas fonctionné, cette page a clignoté avant la redirection :( –

+0

@AvisekChakraborty Eh bien c'est le meilleur que vous pouvez espérer avec JS, donc si ça ne fonctionne pas, vous avez 2 choix: soit accepter que c'est assez bon, ou travailler sur comment faire le côté serveur de redirection ... – Endophage

1

Il est difficile de dire ce que vous essayez d'accomplir. Comme les Etats Endophage, vous pouvez faire une simple redirection JavaScript si tout ce que vous voulez faire est d'aller à une autre page. Je suppose que vous voulez pouvoir choisir d'afficher le contenu de la première ou de la deuxième page tout en restant sur la première page.

Vous pouvez ajouter le code suivant. Assurez-vous de l'ajouter avant le vous incluez jquery.mobile.

<script> 
    $(document).bind('mobileinit', function() { 
     // disable autoInitialize 
     $.mobile.autoInitializePage = false; 
    }); 
    $(function() { 
     var displaySecondPage = true; 
     if (displaySecondPage) { 
      // load page2.html and replace #page1 with contents of #page2 on page2.html 
      $('#page1').replaceWith($('<div />').load('page2.html #page2', function() { 
       // continue initialize 
       $.mobile.initializePage(); 
      })); 
     } 
     else { 
      // continue initialize 
      $.mobile.initializePage();     
     } 
    }); 
</script> 

Fondamentalement, nous lier à mobileinit afin que nous puissions désactiver autoInitialize. Cela nous donne plus de contrôle sur le moment d'afficher la première page.

Maintenant, nous pouvons utiliser un gestionnaire standard jQuery ready pour tester notre condition, et si cela est vrai, charger le contenu de page2.html et remplacer la page #page1. Notez que j'utilise la méthode $.load avec la syntaxe de fragment de page. Cela signifie que vous devez connaître l'identifiant de la page que vous voulez charger.

Une fois la page chargée, vous pouvez appeler $.mobile.initializePage pour permettre à jquery mobile de rendre la nouvelle page.

Pour éviter que le contenu de la première page à afficher au cours de cette charge, ajouter le CSS suivant dans ma feuille de style:

div[data-role='page'] { 
    display: none; 
} 

jQuery Mobile prend soin de montrer et de pages cachées, afin de les rendre tous cachés par Par défaut, vous ne recevrez pas un flash de contenu non amélioré.

Quoi qu'il en soit, espérons que cela aide.

1

Essayez d'utiliser ceci:

<head> 
    <script> 
     window.location.replace('otherPage.html'); 
    </script> 
</head> 
11


Try This One

$("#firstPageId").live("pagecreate",function(){ 
     $.mobile.changePage("otherPage.html"); 
}); 

Vous pouvez également utiliser LoadPage

Hope it helps :)

+0

Merci beaucoup – Dibish

0

Je sais c'est vieux, mais je passé un certain temps à essayer de résoudre cela, donc cela pourrait être utile à quelqu'un. Maintenant, avec jquery mobile 1.3, vous pouvez simplement définir l'URL de données sur <div data-role="page" data-url="..."> sur la page cible. JQM détectera cela et mettra à jour les URL en conséquence.

Voir plus ici http://jquerymobile.com/demos/1.0rc2/docs/pages/page-links.html

Et même une démo ici http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/redirect/index.html

0

Comme il semble qu'il y ait des réponses très à cela; en particulier lorsque vous utilisez un modèle multi-pages .. voici un lien vers une réponse sur les formes mobiles jquery qui fonctionne en injectant la balise # dans l'URL avant la page d'initialisation

jquery forum answer

ne fonctionne pas dans mon cas puisque je ne veux pas que l'utilisateur regarde l'étiquette de hachage mais c'est un début .. plus à venir plus tard

Questions connexes