Question

今天占据我的问题是“如何使用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:'#'}, '#', '/#');
}

Answer 1

我的网站是完整的ajax，这意味着我永远不会刷新浏览器以便从一个页面转到另一个页面。

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

我使用一种RESTfull api执行此操作：

假设您要刷新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]

您的index.php将收到一个请求参数，检索它：
```
$_REQUEST['request']
```
bis：如果您有复杂的网址（www.my-site / page1 / page2），请进行爆炸：
```
$args = explode('/', rtrim($_REQUEST['request'], '/'));
```
编写javascript变量：
```
var pageToLoad = page1;
```

当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事件仍然没有' t fire !!）

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

Answer 2

你可以这样做：

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

不确定此方法是否存在任何缺点，但会在页面刷新时触发状态更改。

使用jquery历史插件处理页面刷新

2 个答案: