JavaScript的HTML5歷史，變量初始化和popState

主要問題JavaScript的HTML5歷史，變量初始化和popState

有鑑別，如果我們要訪問一個頁面的第一次或者是背面的原因的JavaScript的方式？

我的問題

我實現HTML5導航在我的AJAX驅動的網頁。

在主腳本上，我用一些值初始化一個變量。

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

進程（awnsers）將根據給定的awnsers使用ajax更新視圖。

在調用Ajax和替代視圖的功能可按，我存儲歷史

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

我定義的popstate也，在這裏我根據回恢復視圖。而且，我修改了舊值的全局變量awnsers。

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

導航（來回）那張corectly除了當我去到一個外部頁面，然後按返回（arrving到我的網頁再次）。當我們訪問頁面時，首先調用主腳本，更新可調整的awnsers，並開始ajax。同樣，彈出狀態事件被調用，並更新視圖。之後，主Ajax結束，並根據空值更新視圖。

所以我需要的代碼：

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

當用戶進入頁面只能叫而不是在它是一回。任何方式來做到這一點？

謝謝！

可能的解決方案 在第一臺awnser之後，我想到了一種可能的解決方案。經過測試和工作，不管誰，我不知道是否有更清潔的解決方案。我添加了我所做的更改。

首先，我補充一下：

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

然後我修改popState功能，讓負責初始化變量

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

這就是所有。

來源

2012-01-18 Mateu

如何使用全局變量？

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

來源

2012-01-18 11:18:57 Neutralizer

這是行不通的。從外部頁面返回將首先調用onPageLoad，所以我將失去歷史，並有價值awnsers = [];然而，你給了我一個主意。我會用它改變我的帖子。 – Mateu 2012-01-18 12:39:39

使用cookie存儲當前狀態。

來源

2012-01-23 18:49:47 terjeto

這不是一個解決方案 – Mateu 2012-01-30 08:59:03

是啊！這是我有：

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; } 
});

和：

$.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); } 
    } 
});

來源

2012-01-25 21:58:33 Relic

僅供參考：在這裏有一個額外的代碼BUNCH，這是項目特定的。 – Relic 2012-01-25 22:00:46

JavaScript的HTML5歷史，變量初始化和popState

回答

相關問題