pushstate、popstate操作url的方法
這次帶給大家pushstate、popstate操作url的方法,pushstate、popstate操作url的注意事項有哪些,以下是實戰案例,一起來看一下。
一、認識window.history
#window.history表示window物件的歷史記錄,是由使用者主動產生,並且接受javascript腳本控制的全域物件。 window物件透過history物件提供對覽器歷史記錄的存取能力。它暴露了一些非常有用的方法和屬性,讓你在歷史記錄中自由前進和後退。
1、歷史記錄的前進和後退
在歷史記錄中後退,可以這麼做:
window.history.back();
這就像使用者點擊瀏覽器的後退按鈕一樣。
類似的,你可以前進,就像在瀏覽器中點擊前進按鈕,像這樣:
window.history.forward();
2、移動到指定歷史記錄點
透過指定一個相對於目前頁面位置的數值,你可以使用go()方法從目前會話的歷史記錄載入頁面(目前頁面位置索引值為0,上一頁就是- 1,下一頁為1)。
要後退一頁(相當於呼叫back()):
window.history.go(-1);
向前移動一頁(相當於呼叫forward()):
window.history.go(1);
類似的,傳遞參數“2”,你就可以向前移動2個記錄點。你可以查看length屬性值,了解歷史記錄堆疊中總共有多少記錄點:
window.history.length;
#二、修改歷史記錄點
HTML5的新API擴充了window.history,讓歷史記錄點更加開放了。可以儲存目前歷史記錄點、取代目前歷史記錄點、監聽歷史記錄點,以下逐一簡單說明一下。
1、儲存目前歷史記錄點
儲存的方式類似於陣列的入棧(Array.push()),在window.history裡新增一個歷史記錄點,例如:
// 当前的url为:http://qianduanblog.com/index.html var json={time:new Date().getTime()}; // @状态对象:记录历史记录点的额外对象,可以为空 // @页面标题:目前所有浏览器都不支持 // @可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域 window.history.pushState(json,"","http://qianduanblog.com/post-1.html");
執行了pushState方法後,頁面的url位址為http://qianduanblog.com/post-1.html。
2、取代目前歷史記錄點
window.history.replaceState和window.history.pushState類似,不同之處在於replaceState不會在window.history裡新增歷史記錄點,其效果類似window.location.replace(url),都是不會在歷史記錄點新增一個記錄點的。當你為了回應使用者的某些操作,而要更新目前歷史記錄條目的狀態物件或URL時,使用replaceState()方法會特別適合。
3、監聽歷史記錄點
監聽歷史記錄點,直覺的可認為是監聽URL的變化,但會忽略URL的hash部分,監聽URL的hash部分,HTML5有新的API為onhashchange,我的部落格裡也有說到該方法和跨瀏覽器的兼容解決方案。可以透過window.onpopstate來監聽url的變化,並且可以取得儲存在該歷史記錄點的狀態對象,也就是上文說到的json對象,如:
// 当前的url为:http://qianduanblog.com/post-1.html window.onpopstate=function() { // 获得存储在该历史记录点的json对象 var json=window.history.state; // 点击一次回退到:http://qianduanblog.com/index.html // 获得的json为null // 再点击一次前进到:http://qianduanblog.com/post-1.html // 获得json为{time:1369647895656} }
值得注意的是:javascript腳本執行window.history.pushState和window.history.replaceState不會觸發onpopstate事件。
還有一點注意的是,Google瀏覽器和火狐瀏覽器在頁面第一次打開的反應是不同的,Google瀏覽器奇怪的是回觸發onpopstate事件,而火狐瀏覽器則不會。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是pushstate、popstate操作url的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

微信是主流的聊天工具之一,我們可以透過微信認識新的朋友,聯絡老的朋友,維繫朋友之間的友誼。正如天下沒有不散的宴席,人與人之間的相處難免會發生意見不合的時候。當一個人極度影響你的情緒,或是在相處的時候發現三觀不合,沒辦法再繼續溝通,那麼我們可能需要刪除微信好友的方法。怎麼刪除微信好友?刪除微信好友的方法第一步:在微信主介面輕觸【通訊錄】;第二步:點選對應要刪除的好友,進入【詳細資料】;第三步:點選右上角【...】;第四步:點選下方【刪除】即可;第五步:了解後頁面提示後,點選【刪除聯絡人】即可;溫馨

而後悔莫及、人們常常會因為一些原因不小心刪除某些聯絡人、微信作為一款廣泛使用的社群軟體。幫助用戶解決這個問題,本文將介紹如何透過簡單的方法找回被刪除的聯絡人。 1.了解微信聯絡人刪除機制這為我們找回被刪除的聯絡人提供了可能性、微信中的聯絡人刪除機制是將其從通訊錄中移除,但並未完全刪除。 2.使用微信內建「通訊錄恢復」功能微信提供了「通訊錄恢復」節省時間和精力,使用者可以透過此功能快速找回先前刪除的聯絡人,功能。 3.進入微信設定頁面點選右下角,開啟微信應用程式「我」再點選右上角設定圖示、進入設定頁面,,

番茄小說是一款非常熱門的小說閱讀軟體,我們在番茄小說中經常會有新的小說和漫畫可以去閱讀,每一本小說和漫畫都很有意思,很多小伙伴也想著要去寫小說來賺取賺取零用錢,在把自己想要寫的小說內容編輯成文字,那麼我們要怎麼樣在這裡面去寫小說呢?小伙伴們都不知道,那就讓我們一起到本站本站中花點時間來看寫小說的方法介紹。分享番茄小說寫小說方法教學 1、先在手機上打開番茄免費小說app,點擊個人中心——作家中心 2、跳到番茄作家助手頁面——點擊創建新書在小說的結

七彩虹主機板在中國國內市場享有較高的知名度和市場佔有率,但是有些七彩虹主機板的用戶還不清楚怎麼進入bios進行設定呢?針對這一情況,小編專門為大家帶來了兩種進入七彩虹主機板bios的方法,快來試試吧!方法一:使用u盤啟動快捷鍵直接進入u盤裝系統七彩虹主機板一鍵啟動u盤的快捷鍵是ESC或F11,首先使用黑鯊裝機大師製作一個黑鯊U盤啟動盤,然後開啟電腦,當看到開機畫面的時候,連續按下鍵盤上的ESC或F11鍵以後將會進入到一個啟動項順序選擇的窗口,將遊標移到顯示“USB”的地方,然

手機遊戲成為了人們生活中不可或缺的一部分,隨著科技的發展。它以其可愛的龍蛋形象和有趣的孵化過程吸引了眾多玩家的關注,而其中一款備受矚目的遊戲就是手機版龍蛋。幫助玩家們在遊戲中更好地培養和成長自己的小龍,本文將向大家介紹手機版龍蛋的孵化方法。 1.選擇合適的龍蛋種類玩家需要仔細選擇自己喜歡並且適合自己的龍蛋種類,根據遊戲中提供的不同種類的龍蛋屬性和能力。 2.提升孵化機的等級玩家需要透過完成任務和收集道具來提升孵化機的等級,孵化機的等級決定了孵化速度和孵化成功率。 3.收集孵化所需的資源玩家需要在遊戲中

Oracle版本查詢方法詳解Oracle是目前世界上最受歡迎的關聯式資料庫管理系統之一,它提供了豐富的功能和強大的效能,廣泛應用於企業。在進行資料庫管理和開發過程中,了解Oracle資料庫的版本是非常重要的。本文將詳細介紹如何查詢Oracle資料庫的版本信息,並給出具體的程式碼範例。查詢資料庫版本的SQL語句在Oracle資料庫中,可以透過執行簡單的SQL語句

Win11管理員權限取得方法匯總在Windows11作業系統中,管理員權限是非常重要的權限之一,可以讓使用者對系統進行各種操作。有時候,我們可能需要取得管理員權限來完成一些操作,例如安裝軟體、修改系統設定等。下面就為大家總結了一些取得Win11管理員權限的方法,希望能幫助大家。 1.使用快捷鍵在Windows11系統中,可以透過快捷鍵的方式快速開啟命令提

字體大小的設定成為了重要的個人化需求,隨著手機成為人們日常生活的重要工具。以滿足不同使用者的需求、本文將介紹如何透過簡單的操作,提升手機使用體驗,調整手機字體大小。為什麼需要調整手機字體大小-調整字體大小可以使文字更清晰易讀-適合不同年齡段用戶的閱讀需求-方便視力不佳的用戶使用手機系統自帶字體大小設置功能-如何進入系統設置界面-在在設定介面中找到並進入"顯示"選項-找到"字體大小"選項並進行調整第三方應用調整字體大小-下載並安裝支援字體大小調整的應用程式-開啟應用程式並進入相關設定介面-根據個人
