首頁  >  文章  >  web前端  >  詳解JavaScript操作URL的方法(單頁應用常用)

詳解JavaScript操作URL的方法(單頁應用常用)

黄舟
黄舟原創
2017-02-27 14:33:101459瀏覽

詳解JavaScript操作URL的方法(單頁應用常用)

#JavaScript擁有許多可以操作瀏覽器歷史記錄的方法,不管是普通頁面跳轉,還是單頁應用哈希值變化,我們都會經常與這些方法打交道,尤其在單頁應用中這些方法幾乎是頁面路由的核心方法。本文將詳細討論這些方法。

1.document.location

location是最有用的BOM物件之一,它提供了與目前視窗中載入的文件有關的信息,也提供了一些導航功能。事實上,location物件既是window物件的屬性,也是document物件的屬性。換句話說,window.location和document.location是同一個物件。這裡推薦大家使用document.location的寫法,以適應非瀏覽器文件環境。
除去為a標籤設定的href屬性,大家最常用的跳轉方式一定就是:window.location.href=”xxx”;實際上,上面這句程式碼真正執行的是location.assign方法。簡而言之,下面三中URL跳轉的寫法完全等同,都會立即打開新的URL並在瀏覽器的歷史記錄中產生一條記錄:

document.location.assign("xxx");document.location="xxx";document.location.href="xxx";

需要注意的是,如果透過這種方式跳轉的URL與目前URL完全相同,則頁面會刷新,但是瀏覽器歷史記錄不會新增。

2.location.replace

功能幾乎與location.href=”xxx”;完全相同,只有一個區別,location.replace會在瀏覽器的歷史記錄中產生一筆記錄,並取代前一筆記錄。舉個例子,當我們開啟「a.html」頁面,頁面內有以下兩行程式碼:

document.location.href="c.html";document.location.replace("b.html");

瀏覽器先透過location.href的方式跳到c.html ,接著又使用location.replace跳到b.html。此時點選瀏覽器的後退按鈕,瀏覽器會直接回傳a.html,因為c.html這條歷史記錄被replace覆蓋了。

3.window.onhashchange

我們可以透過以下程式碼形式來監聽瀏覽器URL的雜湊值變化:

window.addEventListener("hashchange",function(){
    //do something
},false);//以下代码都会触发hashchange事件
document.location.hash="#a=1";document.location.href="b.html#b=1";document.location.replace("c.html#c=1");

當我們透過改寫location的方式引起瀏覽當器URL雜湊值變化時,hashchange事件就會觸發。如果URL重寫導致了頁面刷新(例如改變了URL查詢參數,或直接跳向一個跨域位址),hashchange事件會直接被跳過。請注意,URL雜湊值變化不一定總是會觸發hashchange事件,下面要介紹的方法就是改動URL但不觸發hashchange。

4. history.pushState

pushState方法接收三個參數:記錄歷史狀態的物件(該物件會在popstate事件觸發時被傳入,有640K的大小限制);一個代表歷史記錄標題的字串;一個與目前URL同源的位址。典型的使用方式如下:

history.pushState({}, "", "b.html");

history.pushState()方法會將URL設為同源URL值,在此之後發送的Ajax請求的Referrer頭部都會使用這個新的值,同時在瀏覽器歷史記錄中產生一筆新的歷史記錄。但是pushState方法不會刷新頁面,pushState引起的URL雜湊值變化也不會觸發hashchange事件。 pushState如果設定了一則與目前URL完全相同的位址,瀏覽器的歷史記錄中仍會新增一筆記錄。

5.history.replaceState

該方法與history.pushState基本上相同,唯一的區別就是replaceState會像location.replace一樣覆蓋先前歷史記錄。
關於history.pushState和history.replaceState的更多介紹:
http://www.php.cn/

6.window.onpopstate

我們可以透過如下程式碼形式來監聽瀏覽器的popstate事件:

window.addEventListener("popstate",function(event){
    //do something},false);

與hashchange事件類似,popstate會在任何URL變化時觸發(hashchange只會在哈希值變化時觸發),並且history.pushState和history. replaceState也不會觸發popstate事件。只有在瀏覽器後退、前進、重寫雜湊值的情況下才會觸發popstate事件。如果URL重寫導致了頁面刷新(例如改變了URL查詢參數,或直接跳向一個跨域位址),popstate事件會直接被跳過。
這裡請注意一下程式碼中傳給事件函數的參數“event”,event參數中包含state對象,這個state物件就是在呼叫history.pushState和history.replaceState方法是傳入的第一個狀態參數,我們可以透過這種狀態傳遞方式來對歷史記錄進行一定處理。

詳解JavaScript操作URL的方法(單頁應用常用)

JavaScript擁有許多可以操作瀏覽器歷史記錄的方法,不管是普通頁面跳轉,還是單頁應用哈希值變化,我們都會經常與這些方法打交道,尤其在單頁應用中這些方法幾乎是頁面路由的核心方法。本文將詳細討論這些方法。

1.document.location

location是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location对象既是window对象的属性,又是document对象的属性。换句话说,window.location和document.location是同一个对象。这里推荐大家使用document.location的写法,以适应非浏览器文档环境。
除去为a标签设置的href属性,大家最常用的跳转方式一定就是:window.location.href=”xxx”;实际上,上面这句代码真正执行的是location.assign方法。简而言之,下面三中URL跳转的写法完全等同,都会立即打开新的URL并在浏览器的历史记录中生成一条记录:

document.location.assign("xxx");document.location="xxx";document.location.href="xxx";

需要注意的是,如果通过这种方式跳转的URL与当前URL完全相同,则页面会刷新,但是浏览器历史记录不会新增。

2.location.replace

功能几乎与location.href=”xxx”;完全相同,只有一个区别,location.replace会在浏览器的历史记录中生成一条记录,并替换前一条记录。举个例子,当我们打开“a.html”页面,页面内有如下两行代码:

document.location.href="c.html";document.location.replace("b.html");

浏览器先通过location.href的方式跳转到c.html,接着又使用location.replace跳转到b.html。此时点击浏览器的后退按钮,浏览器会直接返回a.html,因为c.html这条历史记录被replace覆盖了。

3.window.onhashchange

我们可以通过如下代码形式来监听浏览器URL的哈希值变化:

window.addEventListener("hashchange",function(){
    //do something
},false);//以下代码都会触发hashchange事件
document.location.hash="#a=1";document.location.href="b.html#b=1";document.location.replace("c.html#c=1");

当我们通过改写location的方式引起浏览器URL哈希值变化时,hashchange事件就会触发。如果URL重写导致了页面刷新(例如改变了URL查询参数,或者直接跳向一个跨域地址),hashchange事件会直接被跳过。请注意,URL哈希值变化不一定总是会触发hashchange事件,下面要介绍的方法就是改动URL但不触发hashchange。

4. history.pushState

pushState方法接收三个参数:一个记录历史状态的对象(该对象会在popstate事件触发时被传入,有640K的大小限制);一个代表历史记录标题的字符串;一个与当前URL同源的地址。典型的使用方式如下:

history.pushState({}, "", "b.html");

history.pushState()方法会将URL设置为一个同源URL值,在此之后发送的Ajax请求的Referrer头部都会使用这个新的值,同时在浏览器历史记录中生成一条新的历史记录。但是pushState方法不会刷新页面,pushState引起的URL哈希值变化也不会触发hashchange事件。pushState如果设置了一条与当前URL完全相同的地址,浏览器的历史记录中仍然会新增一条记录。

5.history.replaceState

该方法与history.pushState基本相同,唯一的区别就是replaceState会像location.replace一样覆盖先前历史记录。
关于history.pushState和history.replaceState的更多介绍:
http://www.php.cn/

6.window.onpopstate

我们可以通过如下代码形式来监听浏览器的popstate事件:

window.addEventListener("popstate",function(event){
    //do something},false);

与hashchange事件类似,popstate会在任何URL变化时触发(hashchange只会在哈希值变化时触发),并且history.pushState和history.replaceState也不会触发popstate事件。只有在浏览器后退、前进、重写哈希值的情况下才会触发popstate事件。如果URL重写导致了页面刷新(例如改变了URL查询参数,或者直接跳向一个跨域地址),popstate事件会直接被跳过。
这里请注意一下代码中传给事件函数的参数“event”,event参数中包含state对象,这个state对象就是在调用history.pushState和history.replaceState方法是传入的第一个状态参数,我们可以通过这种状态传递方式来对历史记录进行一定处理。

 以上就是详解JavaScript操作URL的方法(单页应用常用)的内容,更多相关内容请关注PHP中文网(www.php.cn)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn