2012-01-18 8 views
2

主な質問javascriptのHTML5の歴史、変数の初期化とpopState

私たちは初めてのページにアクセスしているか、それが背中の原因であるかどうかを確認するためにjavascriptの方法はありますか?

私の問題

私は私のAJAX駆動型のWebページでのHTML5のナビゲーションを実装しています。

メインスクリプトでは、変数をいくつかの値で初期化します。

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

プロセス(awnsers)は、ajaxを使用して、指定されたawnsersに従ってビューを更新します。 AJAXを呼び出し、ビューを置き換えfuncitonで

は、私は私がバックに応じてビューを復元もpopstateを、定義された歴史

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

を格納します。さらに、グローバル変数awnsersを古い値に変更します。

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

ナビゲーション(前後)は、外部ページに移動してから戻る(ページをもう一度表示する)場合を除いて重要です。 ページにアクセスしているときは、まずメインスクリプトが呼び出され、可搬性のあるawnsersが更新され、ajaxが開始されます。 Meanwile、ポップ状態イベントが呼び出され、ビューが更新されます。その後、メインのAjaxが終了し、空の値に従ってビューが更新されます。

だから私はコードが必要になります。それが帰ってきたときに、ユーザーがページに入ったが、しない場合

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

にのみ呼び出すこと。これを行う方法は?

THanks!

可能な解決策 私は可能な解決策を考えました。テストされ、動作する、誰でも、私は清潔なソリューションがあるかどうかわからない。私が行った変更を加えます。

まず私が追加:

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

それは変数

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

ザッツすべてを初期化するために担当しているので、私は、popState機能を変更します。

答えて

1

グローバル変数はどうですか?

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

これは動作しません。外部のページからのバックは最初にonPageLoadを呼び出すので、私は履歴を失い、値awnsers = []を持ちます。しかし、あなたは私にアイデアをくれました。私はそれで私のポストを変更します。 – Mateu

1

クッキーを使用して現在の状態を保存します。

+2

これは解決策ではありません – Mateu

1

はい!これは私が持っているものです。

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

FYI:ここにプロジェクト固有の追加コードがあります。 – Relic

関連する問題