改换页面地址而不刷新（Modify the URL without reloading the page，翻译和转载）

这玩意能在这些浏览器里面做到了！： Chrome, Safari, FF4+, and IE10Platform Preview4+!

更详细信息可以查看这个页面: Updating address bar with new URL without hash or reloading the page

例子：

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

function processAjaxData(response, urlPath){

document.getElementById("content").innerHTML = response.html;

document.title = response.pageTitle;

window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);

}

现在你可以用 window.onpopstate 来监控前进、后退动作了:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

window.onpopstate = function(e){

if(e.state){

document.getElementById("content").innerHTML = e.state.html;

document.title = e.state.pageTitle;

}

};

想更加深度了解？查看如何操纵浏览历史： this MDN article.

This can now be done in Chrome, Safari, FF4+, and IE10pp4+!
See this question’s answer for more info: Updating address bar with new URL without hash or reloading the page
Example:
function processAjaxData(response, urlPath){ document.getElementById("content").innerHTML = response.html; document.title = response.pageTitle; window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath); }
1
2
3
4
5
function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
}
You can then use window.onpopstate to detect the back/forward button navigation:
window.onpopstate = function(e){ if(e.state){ document.getElementById("content").innerHTML = e.state.html; document.title = e.state.pageTitle; } };
1
2
3
4
5
6
window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};
For a more in-depth look at manipulating browser history see this MDN article.

原页面：http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page

更多参考：

发表回复 取消回复

发表回复取消回复