2012-01-18 2 views
2

question principalejavascript historique html5, initialisation variable et popstate

Est-il possible d'identifier javascript si nous accédons une page pour la première fois ou il est une cause d'un retour?

Mon problème

Je suis mise en œuvre de la navigation html5 dans mon ajax page web entraîné.

Sur le script principal, j'initialise une variable avec certaines valeurs.

<script> 
    var awnsers=[]; 
    process(awnsers); 
<script> 

Processus (awnsers) mettra à jour la vue en fonction des awnsers donnés, en utilisant ajax.

Dans le funciton qui appelle ajax, et remplace la vue, je stocke l'histoire

history.pushState(state, "", ""); 

je définissais le popstate aussi, où je ramènerai la vue selon le dos. De plus, je modifie la variable globale awnsers pour l'ancienne valeur.

function popState(event) { 
if (event.state) { 
    state = event.state; 
    awnsers=state.awnsers; 
    updateView(state.view); 
} 
} 

Navigation (retour) va corectly sauf quand je vais à une page externe, puis appuyez sur Retour (arrving sur ma page à nouveau). Au fur et à mesure que nous accédons à la page, le script principal est appelé, les variables valables sont mises à jour et l'ajax démarre. Meanwile, l'événement pop est appelé et met à jour la vue. Après cela, l'ajax principal se termine et met à jour la vue en fonction des valeurs vides.

donc j'ai besoin le code:

<script> 
    var awnsers=[]; 
    process(awnsers); 
<script> 

être appelé uniquement lorsque l'utilisateur entre dans la page, mais pas quand il est un retour. Tout moyen de le faire?

THanks!

Solution possible Après la première apparition, j'ai pensé à une solution possible. Testé et fonctionne, qui que ce soit, je ne sais pas s'il existe une solution plus propre. J'ajoute les changements que j'ai faits.

D'abord j'ajouter:

$(function() { 
justLoaded=true; 
}); 

puis-je modifier la fonction popstate, de sorte que se charge d'initialiser les variables

function popState(event) { 
if (event.state) { 
    state = event.state; 
    awnsers=state.awnsers; 
    updateView(state.view); 
} else if(justLoaded){ 
     awnsers=[]; 
     process(awnsers); 
    } 
    justLoaded=false; 
} 

C'est tout.

Répondre

1

qu'en est-il de l'utilisation d'une variable globale?

var hasLoaded = false; 

// this function can be called by dom ready or window load 
function onPageLoad() { 
    hasLoaded = true; 
} 

// this function is called when you user presses browser back button and they are still on your page 
function onBack() { 
    if (hasLoaded) { 
     // came by back button and page was loaded 
    } 
    else { 
     // page wasn't loaded. this is first visit of the page 
    } 
} 
+0

Cela ne fonctionnera pas. Le retour d'une page externe appelle d'abord onPageLoad, donc je perds l'historique, et j'ai une valeur awnsers = []; Cependant Tu m'as donné une idée. Je vais changer mon message avec ça. – Mateu

1

Utilisez le cookie pour stocker l'état actuel.

+2

Ceci n'est pas une solution – Mateu

1

ouais!Voilà ce que j'ai:

var popped = (($.browser.msie && parseInt($.browser.version, 10) < 9) ? 'state' in window.history : window.history.hasOwnProperty('state')), initialURL = location.href; 
$(window).on('popstate', function (event) { 
    var initialPop = !popped && location.href === initialURL, state; 
    popped = true; 
    if (initialPop) { return; } 

    state = event.originalEvent.state;   
    if (state && state.reset) { 
     if (history.state === state) { 
      $.ajax({url: state.loc, 
       success: function (response) { 
        $(".fragment").fadeOut(100, function() { 
         $(".fragment").html($(".fragment", response).html()).fadeIn(100); 
        ); 
        document.title = response.match(/<title>(.*)<\/title>/)[1]; 
       } 
      }); 
     } else { history.go(0); } 
    else {window.location = window.location.href; } 
}); 

Et:

$.ajax({url:link, 
    success: function (response) { 
     var replace = args.replace.split(","); 
     $.each(replace, function (i) { 
      replace[i] += ($(replace[i]).find("#video-content").length > 0) ? " #video-content" : ""; 
      var selector = ".fragment "+replace[i]; 
      $(selector).fadeOut(100, function() { 
       $(selector).html($(selector,response).html()).fadeIn(100, function() { 
        if (base.children("span[data-video]")[0]) { 
         if ($.browser.msie && parseInt($.browser.version, 10) === 7) { 
          $("#theVideo").html(""); 
          _.videoPlayer(); 
         } else { 
          _.player.cueVideoById(base.children("span[data-video]").attr("data-video")); 
         } 
        } 
       }); 
      }); 
     }); 
     document.title = response.match(/<title>(.*)<\/title>/)[1]; 
     window.history.ready = true; 
     if (history && history.pushState) { history.pushState({reset:true, loc:link}, null, link); } 
    } 
}); 
+0

FYI: Il y a un BUNCH de code supplémentaire ici qui est spécifique au projet. – Relic