JavaScript >> Javascript 文檔 >  >> Tags >> web

JavaScript:如何重定向到另一個網頁

簡介

通常,我們需要將用戶重定向到另一個網站或同一站點上的另一個網頁。有幾種重定向方法,其中包括 JavaScript 重定向 , 服務器端重定向 , 和 HTML 元刷新重定向 .重定向基本上是一種將用戶發送到另一個 URL 地址的機制。

使用重定向的動機可能會有所不同,在大多數情況下,這是因為:

  • 您出於任何原因移至另一個域,因此當用戶訪問舊域上的內容時,您可以將他們重定向到新域。

  • 您有多個頁面,其內容因位置、語言、瀏覽器或其他因素而異,您會根據這些因素將用戶重定向到最合適的頁面。

  • 您將未經身份驗證或未經授權的用戶對資源的請求重定向到登錄頁面。

  • 您將用戶引導到與當前站點內容相關的其他頁面。

所有這些實際上都是通過Location實現的 包含 URL 信息的對象 .有幾種方法可以做到這一點,通過擺弄 Location 的不同屬性 目的。在本教程中,我們將了解 如何在 JavaScript 中將用戶重定向到不同的網頁 以及如何將潛在的負面 SEO 影響降至最低。

window.location 屬性

window.location object 表示當前位置 ,或者更確切地說,窗口/用戶的 URL。從技術上講,它是一個只讀 屬性,儘管如此,我們可以通過分配新值(DOMString s) 到它的屬性。 windows windows.location 中的前綴 對象可以省略,因為它在層次上位於範圍的頂部。

使用 location.href 重定向用戶

location.href 屬性將當前 URL 表示為字符串。更改 href 屬性也會自動將用戶導航到新的 href 價值。更改 href 屬性就像簡單地為其分配一個新值一樣簡單:

location.href = "https://stackabuse.com/";

注意: 功能等效的代碼行是:

windows.location = "https://stackabuse.com";

值得注意的是,您可以將用戶重定向到域 other 與他們目前使用這種方法的域相比,安全問題可能由此產生,因此應盡可能避免這種做法。

重定向是通常 與某種事件相關聯,例如按下將用戶重定向到不同網頁的按鈕,或其他事件,例如用戶在網站上執行某些操作(在社交媒體上上傳圖像,然後將其重定向到那個帖子,例如)。讓我們編寫一個簡單的函數,通過單擊按鈕重定向用戶:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Redirection</title>
    <script type = "text/javascript">
        function Redirect() {
         window.location.href = "https://stackabuse.com/";
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Redirect()"/>
</body>
</html>

設置href 屬性類似於 鼠標單擊 會的。

使用 location.assign() 重定向用戶

location.assign(url) 方法在提供的 url 中加載資源 , 並顯示在 window .與設置 href 相比,這實際上是重定向用戶的首選方法 屬性,因為它還檢查 safety 提供的 url ,如果它不是一個安全的目的地,則拋出異常。另一個好處是它會在瀏覽器的歷史記錄中創建一個新條目 ,允許用戶優雅地返回“返回” 如果他們願意的話。

還值得注意的是 location.assign() 不允許跨域 重定向。您只能重定向到進行調用的同一域,這對安全性有積極影響。

除此之外,它的使用方式與為 location.href 分配新值的方式大致相同 .讓我們重寫我們的頁面以使用 assign() 改為函數:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Assigning</title>
    <script type = "text/javascript">
        function Assign() {
         window.location.assign("https://stackabuse.com/");
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Assign()" />
</body>
</html>

使用 location.replace() 重定向用戶

replace(url) 方法可用於替換 window 上的當前資源 ,從 url 加載資源 .它並沒有真正重定向 用戶,並且不會存儲在瀏覽器的歷史記錄中。存在與 assign() 相同的安全約束 方法,如果您想用另一個頁面替換內容,這是一種理想的方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Replacing</title>
    <script type = "text/javascript">
        function Replace() {
         window.location.Replace("https://stackabuse.com");
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Replace()" />
</body>
</html>

還值得注意的是 assign() 方法具有嚴重的,潛在的,缺點。如果用戶要返回自動運行 assign() 的頁面 方法,它們將被重定向返回 到他們嘗試返回的頁面返回 .然後他們會通過返回按鈕進入一個“返回”循環 ,但由於 assign() 而被重定向到另一個頁面 方法。

如果您使用的是 assign() ,請確保它不是 在頁面上自動調用,並且它的調用需要用戶的操作,例如在按下按鈕時調用它。如果沒有 - 使用 location.replace() .

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

此外,location.replace() 最接近HTTP 重定向 ,因為原始鏈接不會添加到瀏覽器的歷史記錄中。

安全隱患和副作用

上述安全性適用於上述所有方法,具體指以下幾個方面:

  • 如果調用該方法的腳本的來源與當前頁面的來源不同 - 它將被視為安全違規和 SECURITY_ERROR 的 DOMException 類型將被拋出。也就是說,嵌入到您自己頁面中的外部庫和服務將無法重定向用戶。
  • 如果存儲的 URL 無效,則為 DOMException 將被拋出。
  • 如果您將用戶重定向到他們所在域以外的域,CORS 可能會啟動並阻止它。

由於人為設計問題而可能發生的一些副作用是:

  • 重定向時(replace() 除外) ) 發生得太快(即不到 3 秒),它可能會破壞瀏覽器上的後退按鈕。這意味著每次您嘗試返回上一頁時,重定向幾乎會立即再次發生,從而創建一個無限循環。
  • 不推薦將其視為門口頁面(即為 SEO 索引操作創建的頁面)
  • 計劃不周和使用不當的重定向可能會導致鍊式重定向,即在兩個或多個頁面之間進行重定向。

對 SEO 的影響

很多 影響 SEO 的因素,其中很多因素實際上並未公開,以免被濫用。不過,可以肯定的是,優化不佳的代碼會對 SEO 產生負面影響。它可能導致加載時間長、重定向鏈甚至循環。許多網絡爬蟲不會執行會對頁面排名產生負面影響的 JavaScript 代碼。

克服這些問題的最佳方法可能是:

  • 為了正確地發出 HTTP 重定向服務器端 帶有任何重定向狀態代碼 (301..308 ) 或發出 404 對於您不再想託管或重定向到的頁面。

  • 通過添加 <link rel="canonical" href="https://original_link"/> 通知搜索引擎重複頁面 在 <head></head> 部分。這比在服務器端做任何額外的工作更容易實現,但請記住,並非所有網絡爬蟲都會喜歡它。

結論

在本教程中,我們介紹瞭如何執行 重定向 使用 JavaScript,以及對 SEO 的安全隱患和潛在影響。


Tutorial JavaScript 教程
  1. 帶有 Nuxt、Express 和 Tailwind 的 Osteo 多語言網站🌍

  2. Node REST API 中的控制器和服務有什麼區別?

  3. 使用沒有 CRA 的 Typescript 配置 React

  4. JS 中的遞歸優化 - 它在哪裡? PTC、TCO 和 FUD

  5. (PERCY) 警告:跳過視覺測試。未提供 PERCY_TOKEN

  6. 如何配置 Prettier 以自動化代碼格式化

  7. 提高 JavaScript 性能的 12 個技巧

  1. 一切都比最初看起來更複雜

  2. Node-HarperDB REST API

  3. 三個月後世博會的印象

  4. date-fns:JavaScript 的日期庫

  5. 簡要介紹 map() 、 filter() 和 reduce() 方法

  6. 使用 HTML、CSS 和 JS 的 TODO APP - 本地存儲 [設計 - HTML 和 CSS]

  7. JavaScript 基礎

  1. 什麼是自動批處理? React 18 特性解釋

  2. 前端短褲:Vue.js + Vanilla.js — 數字骰子

  3. 沒有 Angular 的 Angular 服務?謝謝打字稿

  4. 深入了解 JavaScript 中的偉大觀察者模式