Javascript history對象的 history.pushState() 和 history.replaceState() 方法

時間 2019-11-08

標籤 javascript history 對象 history.pushstate pushstate history.replacestate replacestate 方法欄目 JavaScript 简体版

原文原文鏈接

history.pushState() 和 history.replaceState() 是history對象的兩個新增的方法，javascript

是能夠很好的操做歷史記錄的方法；html

history.State()java

history.State()的做用是向瀏覽器的歷史添加一條記錄，咱們來看看如何使用這個方法：web

咱們建立一個html網頁文件，在網頁中加入一個button按鈕便可，咱們看看顯示效果瀏覽器

咱們看到在地址欄中顯示了文件的地址，如今咱們不刷新網頁，也不跳轉到其它地址，函數

就在原網頁不變的狀況下改變地址欄中的地址，怎麼作呢？code

在咱們以前的網頁中添加javascript代碼，也就是上面紅色的部分，使用了pushState（）方法；cdn

而後咱們打開這個網頁，開始的時候地址欄是不變的，咱們點擊一下按鈕看看：htm

網頁自己沒有任何變化，只是地址欄發生了變化，實現了無刷新改變地址欄，而且在歷史記錄對象

中添加了一個新的紀錄；

history.replaceState()

history.replaceState()的做用是替換當前的歷史記錄，咱們看看如何使用這個方法：

在上面 history.pushState( ) 方法中，咱們第一步建立了一個index.html網頁，

第二步咱們使用pushState( )方法增長了一條歷史記錄，這是第二條歷史記錄；

如今咱們在上面的基礎上改變一下，使用replaceState() 方法，代碼：

<body>

<button id="abc">test</button>

<script>

var abc=document.getElementById("abc");

abc.onclick=function(){ window.history.pushState(null,null,'?page=1'); history.replaceState(null, null, '?page=2'); }

</script>

咱們再次進入網頁，而且點擊按鈕，觸發js函數，

這個時候地址欄中的地址爲：file:///F:/web_pro/pro_p/index.html?page=2

咱們使用replaceState（）方法將歷史記錄 file:///F:/web_pro/pro_p/index.html?page=1

替換成了：file:///F:/web_pro/pro_p/index.html?page=2 ；

整個過程仍是比較清楚的；

總結：pushState()方法是在歷史記錄中增長一條新的記錄；

replaceState()方法是將當前的歷史記錄給替換掉，傳說中的奪舍重生！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。