1

今天困扰我的问题是“如何使用 jQuery History 插件捕捉页面刷新”！

从一些代码开始：

function changePage(PageURI){
    History.pushState({PageURL:PageURI}, PageURI, "/"+PageURI);
}

// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){
    var State = History.getState();
    dispatchURL(State.data.PageURL);
});

所以一切都在更好的世界里完美运行，我所有的主播都有一个：

onclick="javascript:changePage('New-Page');"

诀窍是，当我刷新页面（F5 或浏览器图标）时，不会触发 History statechange 事件（这是不稳定的原因，因为 URL 不会改变），但这对我的事务不利。

那么使用 History 插件的人能否告诉我他们如何处理页面刷新或告诉我如何通过 History（或仅 jquery）事件捕获页面刷新事件？

谢谢 ！

编辑

在等待更好的解决方案时，这里有一个解决方法：

window.onbeforeunload = function() {
    History.pushState({PageURL:'#'}, '#', '/#');
}
4

2 回答 2

1

我的网站是完整的 ajax，这意味着我从不刷新浏览器来逐页浏览。

因此，当我进行页面刷新（或直接访问特定页面）时，我必须在服务器端处理它以了解调用了哪个页面并将适当的参数传递给我的 javascript 以显示需要的内容。

我用一种 RESTfull api 来做到这一点：

  1. 假设您要刷新 www.my-site/page1 ：告诉 .htaccess 重定向 page1

    RewriteCond %{THE_REQUEST} ^[A-Z]{3,}\s/+index\.php\?request=page1 [NC]

RewriteRule ^ /page1? [R=301,L]

RewriteRule ^page1$ index.php?request=page1 [QSA,NC,L]

  2. 您的 index.php 将收到一个请求参数，检索它：

    $_REQUEST['request']

  3. 之二：如果你有复杂的 URL (www.my-site/page1/page2) 做一个爆炸：

    $args = explode('/', rtrim($_REQUEST['request'], '/'));

  4. 编写javascript变量：

    var pageToLoad = page1;

  5. 当 DOM 准备就绪时，执行适当的操作：

    if(typeof pageToLoad !== 'undefined'){
    if(pageToLoad==='page1'){
        // DISPLAY WHAT YOU NEED
    }
}

附加信息：

如果像我一样，您在状态更改事件中处理页面的操作：

(function(window,undefined){

    History.Adapter.bind(window,'statechange',function(){ 
        var State = History.getState(); 

        dispatchURL(State.data.PageURL, State.data.PageID);
    });

})(window);

页面刷新时不会触发任何 statechange 事件，所以您可以做的是测试当前状态（注意我给出了我的 PageID 的不同参数，因为如果所有参数都与以前的状态相同，statechange 事件仍然不会触发！ ！）

function changePage(PageURI){
    if(PageURI===null){ PageURI=''; }
    var State = History.getState();
    if(State.data.PageURL===PageURI){
        History.replaceState({PageURL:PageURI, PageID:'1'}, PageURI, "/"+PageURI);
    } else {
        History.pushState({PageURL:PageURI, PageID:null}, PageURI, "/"+PageURI);
    }
}
于 2014-02-17T21:33:46.270 回答
0

你可以这样做：

function changePage(PageURI){
  History.pushState({PageURL: PageURI, rand: Math.random()}, PageURI, "/"+PageURI);
}

不确定此方法是否有任何缺点，但它会在页面刷新时触发 statechange。

于 2014-02-25T07:20:40.517 回答