[轉]javascript 的 location 各種用法

FROM : http://tech.pixnet.us/blog/post/31376360

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 之前是抓不到的

 

參考資料:

http://www.dreamdu.com/javascript/window.location/