The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

細談 location.href 與 location.replace 的差別與實務應用

在 JavaScript 中若要撰寫網頁轉址程式非常容易,有寫過的人都知道要用 location.href 屬性,而另外還有一個 location.replace 可用,功能差不多,但在實務上應用是有差異的,我今天就來說說它們之間的差異。

首先給 JavaScript 初學者幾個清楚的範例,避免寫錯程式。

location 物件的 href 是個屬性,屬性需要直接指定其值,例如:

location.href = 'http://blog.miniasp.com/';

location 物件的 replace 是個方法(method)函式(function),需要加上刮號傳入參數,例如:

location.replace('http://blog.miniasp.com/');

接著,我用一個簡單的例子說明這兩個用法直接下連結的差別:

<a href="a.htm">a.htm</a>
|
<a href="#" onclick="location.href='a.htm'">location.href='a.htm';</a>
|
<a href="#" onclick="location.replace('a.htm')">location.replace('a.htm')</a>

1. 直接用 <a href="a.htm"> 連結的作法

  • 瀏覽器送出 Referer 這個 HTTP Header
  • 瀏覽器紀錄連結的歷史紀錄 ( 好讓瀏覽器的 上一頁 、 下一頁 按鈕可以運作 )

2. 透過 JavaScript 的 location.href 指派網址

  • 瀏覽器不會送出 Referer 這個 HTTP Header
  • 瀏覽器紀錄連結的歷史紀錄 ( 好讓瀏覽器的 上一頁 、 下一頁 按鈕可以運作 )

3. 透過 JavaScript 的 location.replace 傳入網址

  • 瀏覽器不會送出 Referer 這個 HTTP Header
  • 瀏覽器不會紀錄連結的歷史紀錄! ( 瀏覽器將無瀏覽歷史紀錄 )

---

瞭解差異後,我再介紹一個實務的應用,讓你有更深一層的體會。

我需要在網頁下載檔案,但有經驗的人應該知道,通常的作法有幾種:

  1. 開新視窗進行下載動作
    • 優點:運氣好時,檔案會直接開在 Browser 視窗中上。
    • 缺點:有時後檔案下載了,但是視窗會殘留!
  2. 在本頁直接下載
    • 優點:運氣好時,檔案會直接下載。
    • 缺點:若遇到檔案會直接在 User 的瀏覽器直接開啟的狀況,有可能會讓 User 等到檔案下載完才會開啟,例如有些 PDF 檔非常大,下載的這段時間 Browser 會卡死不能動。
  3. 透過一個隱藏的 Frame 或 IFrame 進行下載 ( 直接透過 <a> 標籤的 target 指定 iframe 目標 )
    • 優點:運氣好時,檔案會直接下載,運氣不好時也不會殘留視窗。
    • 缺點:運氣不好時檔案就看不到了,不過可以透過設定 Content-Disposition 強制下載。
    • 缺點:當使用者連續下載兩個檔案,又按下瀏覽器上的「回上一頁」時,會重新下載上一個檔案!
  4. 透過一個隱藏的 Frame 或 IFrame 進行下載 ( 透過 location.href 指定下載目標 )
    • 優點:運氣好時,檔案會直接下載,運氣不好時也不會殘留視窗。
    • 缺點:運氣不好時檔案就看不到了,不過可以透過設定 Content-Disposition 強制下載。
    • 缺點:當使用者連續下載兩個檔案,又按下瀏覽器上的「回上一頁」時,會重新下載上一個檔案!
  5. 透過一個隱藏的 Frame 或 IFrame 進行下載 ( 透過 location.replace 指定下載目標 )
    • 優點:運氣好時,檔案會直接下載,運氣不好時也不會殘留視窗。
    • 優點:當使用者連續下載兩個檔案,又按下瀏覽器上的「回上一頁」時,因為在瀏覽器中該 frame 並無瀏覽紀錄,所以不會發生重複下載的動作。
    • 缺點:運氣不好時檔案就看不到了,不過可以透過設定 Content-Disposition 強制下載。

    由此可知,第 5 種指定下載的方法是最好的!雖然是一個簡單的差異,但時實務上就是有那麼一點 "眉角" (台語, 小技巧的意思),一點小經驗分享。^_^

    相關連結