История HTML5 JavaScript, инициализация переменной и popState - PullRequest
2 голосов
/ 18 января 2012

основной вопрос

Существует ли способ javascript, позволяющий определить, обращаемся ли мы к странице в первый раз или это является причиной возврата?

Моя проблема

Я реализую html5-навигацию на моей веб-странице, управляемой ajax.

В основном скрипте я инициализирую переменную с некоторыми значениями.

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

Process (awnsers) обновит представление в соответствии с заданными awnsers, используя ajax.

В функции, которая вызывает ajax и заменяет представление, я сохраняю историю

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

Я также определил popstate, где я восстанавливаю вид в соответствии со спиной.Кроме того, я изменяю глобальную переменную awnsers для старого значения.

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

Навигация (туда и обратно) идет по существу, за исключением случаев, когда я перехожу на внешнюю страницу и нажимаю назад (снова поступая на мою страницу).Когда мы обращаемся к странице, сначала вызывается основной скрипт, обновляются корректные awnsers и запускается ajax.Между тем, событие состояния pop вызывается и обновляет представление.После этого основной ajax заканчивается и обновляет представление в соответствии с пустыми значениями.

Поэтому мне нужен код:

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

вызывается только тогда, когда пользователь заходит на страницу, но НЕ когда онаэто спина.Есть ли способ сделать это?

Спасибо!

Возможное решение После первого сообщения я подумал о возможном решении.Проверено и работает, кто бы ни был, я не знаю, есть ли какое-нибудь более чистое решение.Я добавляю изменения, которые я сделал.

Сначала я добавляю:

$(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;
}

Вот и все.

Ответы [ 3 ]

1 голос
/ 23 января 2012

Используйте cookie для хранения текущего состояния.

1 голос
/ 26 января 2012

да!Вот что у меня есть:

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); }
    }
});
1 голос
/ 18 января 2012

как насчет использования глобальной переменной?

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