javascript 的 location 有兩種跳頁的方法。
location.assign(url);
location.replace(url);

其中 location.assign(url); 跟 location = url; 或是 location.href = url; 功用是一樣的。

那麼 assign 和 replace 有什麼差別呢?

我在 pagea.html 跑了 assign('pageb.html'); 的話,在 pageb 按 browser 的上一頁,會回到 pagea.html,在 pagea.html 按下一頁會回到 pageb.html
但是如果我跑的是 replace('pageb.html'); 的話,上一頁會回到 pagea.html 的上一頁。下一頁的話會跑到 pageb.html 。也就是 pagea.html 被取代掉了無法用上一頁下一頁回到他那邊。

而如果要作重新整理的話
有 location.reload() 可以使用
不建議使用 location = location; ,在網址包含 # 的時候這樣重新整理會失效。

location.reload() 裡面也可以傳入 true or false 的參數(預數為 false)
如果選擇了 location.reload(true); 的話,會加上 Cache-Control no-cache 的 header ,也就是強制去 GET 一次,否則的話就會依照之前的 Cache-Control 去 GET。
有點相當於 F5 和 Ctrl+F5 的差別。

另外值得注意的是 location.hash 的部分。
當現在的網址是 http://ronny.tw/#abc 的時候, location.hash 可以取得 #abc (最左邊一定是 # 開頭)
如果跑了 location.hash='def'; ,網址會變成 http://ronny.tw/#def

在 http://ronny.tw/#abc 的情況下,以下動作都不會重新整理頁面。
location = 'http://ronny.tw/#def';
location = '#def';
location.hash = 'def'
location.hash = '#def'
location = '/#def';
location = location; // 所以有些人用 location = location 來作 reload 動作,在包含 # 的時候會失效
location.assign('#def');
location.replace('#def');

要注意的是,在 http://ronny.tw/#abc 的情況下
location = 'http://ronny.tw/'; 是會重新整理的。
所以在網址已經包含 # 的情況下,是無法作到在不重新整理頁面的情況下把 # 拿掉的。
另外 location.href 是包含 '#' 的網址

location object 內並沒有不包含 # 的完整網址的 property 可以用
所以要取得不包含 # 的完整網址的話,有以下方法
location.href.split('#', 2)[0]
location.protocol + '//' + location.host + location.pathname + location.search

不過如果要跳到沒有 # 的頁面去的話,只需要用 location = location.pathname + location.search 就夠了。

再來一個要注意的
在萬惡的 IE 中
如果你的網址中包含 # 的話
location.reload() 並不會跳到 # 的位置,而是會跳到最上頭。
所以如果你會 care 這點的話,必需要在 reload() 之後再補上一次 location = location; 才會跳到 # 的位置。

另外,在修改或加上 # 的東西的話,會觸發 hashchange 事件
因此可以用 jQuery(window).bind('hashchange', function(){ // ... }); 去補捉 hash change 事件
(IE 是到 IE8 才支援的,IE7 之前是抓不到的)

榮尼王 發表在 痞客邦 PIXNET 留言(0) 人氣()