javascript 網頁重定向 - 如何重定向到其他網頁？

javascript轉址 php轉址 (25)

警告：此答案僅作為可能的解決方案提供; 它顯然不是最好的解決方案，因為它需要jQuery。相反，更喜歡純JavaScript解決方案。

$(location).attr('href', 'http://stackoverflow.com')

如何使用jQuery或純JavaScript將用戶從一個頁面重定向到另一個頁面？

標準的“vanilla”JavaScript重定向頁面的方式：
window.location.href = 'newPage.html';

如果您在這裡因為重定向時丟失了 HTTP_REFERER，請繼續閱讀：

以下部分適用於那些使用HTTP_REFERER作為許多安全措施之一的人（儘管它不是一個很好的保護措施）。如果您使用的是Internet Explorer 8或更低版本，則在使用任何形式的JavaScript頁面重定向（location.href等）時，這些變量都會丟失。

下面我們將實現IE8及更低版本的替代方案，以便我們不會丟失HTTP_REFERER。否則你幾乎總是可以簡單地使用window.location.href 。

針對HTTP_REFERER （URL粘貼，會話等）進行測試有助於判斷請求是否合法。 （ 注意：還有一些方法可以解決這些引用者的問題，如評論中的droop鏈接所述）

簡單的跨瀏覽器測試解決方案（回退到Internet Explorer 9+和所有其他瀏覽器的window.location.href）

用法： redirect('anotherpage.aspx');

function redirect (url) {
    var ua        = navigator.userAgent.toLowerCase(),
        isIE      = ua.indexOf('msie') !== -1,
        version   = parseInt(ua.substr(4, 2), 10);

    // Internet Explorer 8 and lower
    if (isIE && version < 9) {
        var link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click();
    }

    // All other browsers can use the standard window.location.href (they don't lose HTTP_REFERER like Internet Explorer 8 & lower does)
    else { 
        window.location.href = url; 
    }
}

JavaScript為您提供了許多方法來檢索和更改瀏覽器地址欄中顯示的當前URL。所有這些方法都使用Location對象，它是Window對象的屬性。您可以創建一個具有當前URL的新Location對象，如下所示。

var currentLocation = window.location;

URL的基本結構

<protocol>//<hostname>:<port>/<pathname><search><hash>

協議 - 指定用於訪問Internet上資源的協議名稱。（HTTP（不使用SSL）或HTTPS（使用SSL））
hostname - 主機名指定擁有該資源的主機。例如，www..com。服務器使用主機名提供服務。
端口 - 用於識別Internet或其他網絡消息到達服務器時要轉發到的特定進程的端口號。
pathname - 該路徑提供有關Web客戶端要訪問的主機中特定資源的信息。例如，.com / index.html。
query - 查詢字符串跟在路徑組件之後，並提供資源可用於某種目的的信息字符串（例如，作為搜索的參數或要處理的數據）。
hash - URL的錨點部分，包括井號（＃）。

使用這些Location對象屬性，您可以訪問所有這些URL組件

hash -Set或返回URL的錨點部分。
host - 設置或返回URL的主機名和端口。
hostname - 設置或返回URL的主機名。
href - 設置或返回整個URL。
pathname - 設置或返回URL的路徑名。
port - 設置或返回服務器用於URL的端口號。
protocol - 設置或返回URL的協議。
search - 設置或返回URL的查詢部分

現在如果您想要更改頁面或將用戶重定向到其他頁面，您可以使用Location對象的href屬性

您可以使用Location對象的href屬性。

window.location.href = "http://www..com";

Location Object也有這三種方法

assign（） - 加載新文檔。
reload（） - 重新加載當前文檔。
replace（） - 用新文檔替換當前文檔

您也可以使用assign（）和replace方法重定向到這些其他頁面

location.assign("http://www..com");

location.replace("http://www..com");

assign（）和replace（）的區別如何 - replace（）方法和assign（）方法（）之間的區別在於replace（）從文檔歷史中刪除當前文檔的URL，意味著它不可能使用“後退”按鈕導航回原始文檔。因此，如果要加載新文檔，請使用assign（）方法，並希望選擇導航回原始文檔。

您也可以使用jQuery更改location對象href屬性

$(location).attr('href',url);

因此，您可以將用戶重定向到其他網址。

您需要在代碼中添加以下行：

$(location).attr("href","http://.com");

如果您沒有jQuery，請使用JavaScript：

window.location.replace("http://.com");
window.location.href("http://.com");

*****原始問題是 - “如何重新使用JQUERY”，HANS THE ANSWER IMPLEMENTS JQUERY >>免費使用案例*****

要使用JavaScript重定向到某個頁面：

  window.location.href = "/contact/";

或者如果你需要延遲：

setTimeout(function () {
  window.location.href = "/contact/";
}, 2000);   // Time in milliseconds

jQuery允許您輕鬆地從網頁中選擇元素。您可以在頁面上找到任何想要的內容，然後使用jQuery添加特殊效果，對用戶操作做出反應，或者顯示和隱藏您選擇的元素內部或外部的內容。所有這些任務都從知道如何選擇元素或事件開始。

     $('a,img').on('click',function(e){
         e.preventDefault();
         $(this).animate({
             opacity: 0 //Put some CSS animation here
         }, 500);
         setTimeout(function(){
           // OK, finished jQuery staff, let's go redirect
           window.location.href = "/contact/";
         },500);
     });

想像一下有人寫了一行10000行的腳本/插件？！好吧，使用jQuery，您只需一兩行即可連接到此代碼。

你可以在沒有jQuery的情況下做到這一點：

window.location = "http://yourdomain.com";

如果你只想要jQuery那麼你可以這樣做：

$jq(window).attr("location","http://yourdomain.com");

在您的點擊功能上，只需添加：

window.location.href = "The URL where you want to redirect";
$('#id').click(function(){
    window.location.href = "http://www.google.com";
});

ECMAScript 6 + jQuery，85字節

$({jQueryCode:(url)=>location.replace(url)}).attr("jQueryCode")("http://example.com")

請不要殺我，這是個玩笑。這是個玩笑。 這是個玩笑。

這確實“提供了問題的答案”，因為它要求“使用jQuery”的解決方案，在這種情況下需要以某種方式強制它進入等式。

Ferrybig顯然需要解釋這個笑話（仍在開玩笑，我確信評論表上的選項有限），所以不用多說：

其他答案是不必要地在location或window對像上使用jQuery的attr() 。

這個答案也濫用它，但是更加荒謬。它使用attr()來檢索設置位置的函數，而不是使用它來設置位置。

該函數被命名為jQueryCode即使它沒有關於它的jQuery，並且調用函數somethingCode是非常可怕的，特別是當某些東西甚至不是一種語言時。

“85字節”是對Code Golf的引用。高爾夫顯然不是你應該在代碼高爾夫之外做的事情，而且這個答案顯然不是高爾夫球。

基本上，畏縮。

有三種主要方法可以做到這一點，

window.location.href='blaah.com';
window.location.assign('blaah.com');

和...

window.location.replace('blaah.com');

對於傳統的重定向，最後一個是最好的，因為它不會保存您在搜索歷史記錄中重定向之前所訪問的頁面。但是，如果您只想打開帶有JavaScript的選項卡，則可以使用上述任何一個選項卡。 1

編輯：window前綴是可選的。

一個不是簡單地使用jQuery重定向

jQuery不是必需的， window.location.replace(...)將最好地模擬HTTP重定向。

window.location.replace(...)比使用window.location.href更好，因為replace()不會將原始頁面保留在會話歷史記錄中，這意味著用戶不會陷入永無止境的後台 -按鈕慘敗。

如果要模擬某人點擊鏈接，請使用location.href
如果要模擬HTTP重定向，請使用location.replace

例如：

// similar behavior as an HTTP redirect
window.location.replace("http://.com");

// similar behavior as clicking on a link
window.location.href = "http://.com";

不需要jQuery。你可以這樣做：

window.open("URL","_self","","")

就這麼簡單！

發起HTTP請求的最佳方法是使用document.loacation.href.replace('URL') 。

有很多方法可以做到這一點。

// window.location
window.location.replace('http://www.example.com')
window.location.assign('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/path'

// window.history
window.history.back()
window.history.go(-1)

// window.navigate; ONLY for old versions of Internet Explorer
window.navigate('top.jsp')


// Probably no bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';

// jQuery
$(location).attr('href','http://www.example.com')
$(window).attr('location','http://www.example.com')
$(location).prop('href', 'http://www.example.com')

但如果有人想重定向回主頁，那麼他可能會使用以下代碼段。

window.location = window.location.host

如果您有三個不同的環境，如開發，登台和生產，將會很有幫助。

只需將這些單詞放在Chrome控制台或Firebug的控制台中，即可瀏覽此窗口或window.location對象。

這適用於每個瀏覽器：

window.location.href = 'your_url';

我還認為location.replace(URL)是最好的方法，但如果你想通知搜索引擎你的重定向（他們不分析JavaScript代碼以查看重定向），你應該添加rel="canonical"元標記到您的網站。

添加帶有HTML刷新元標記的noscript部分也是一個很好的解決方案。我建議你使用這個JavaScript重定向工具來創建重定向。它還具有Internet Explorer支持以傳遞HTTP引用者。

沒有延遲的示例代碼如下所示：

<!-- Place this snippet right after opening the head tag to make it work properly -->

<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->

<!-- REDIRECTING STARTS -->
<link rel="canonical" href="https://yourdomain.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0;URL=https://yourdomain.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://yourdomain.com/";
    if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
    {
        document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
        var referLink = document.createElement("a");
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    }
    else { window.location.replace(url); } // All other browsers
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->

這是一個延時重定向。您可以將延遲時間設置為您想要的任何值：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Your Document Title</title>
    <script type="text/javascript">
        function delayer(delay) {
            onLoad = setTimeout('window.location.href = "http://www.google.com/"', delay);
        }
    </script>
</head>

<body>
    <script>
        delayer(8000)
    </script>
    <div>You will be redirected in 8 seconds!</div>
</body>

</html>

var url = 'asdf.html';
window.location.href = url;

在JavaScript和jQuery中，我們可以使用以下代碼將一個頁面重定向到另一個頁面：

window.location.href="http://google.com";
window.location.replace("page1.html");

應該只能使用window.location進行設置。

例：

window.location = "https://.com/";

這是關於這個主題的過去的帖子：

如何重定向到其他網頁？

基本上jQuery只是一個JavaScript框架，在這種情況下做一些重定向等事情，你可以使用純JavaScript，所以在這種情況下你有3個選項使用vanilla JavaScript：

1）使用位置替換，這將替換頁面的當前歷史記錄，意味著無法使用後退按鈕返回原始頁面。

window.location.replace("http://.com");

2）使用位置分配，這將保留您的歷史記錄，使用後退按鈕，您可以返回到原始頁面：

window.location.assign("http://.com");

3）我建議使用以前的方法之一，但這可能是使用純JavaScript的第三個選項：

window.location.href="http://.com";

您也可以在jQuery中編寫一個函數來處理它，但不推薦使用它，因為它只有一行純JavaScript函數，如果您已經在窗口範圍內，也可以使用上述所有函數而不使用窗口，例如window.location.replace("http://.com"); 可能是location.replace("http://.com");

我還會在下面的圖片中顯示所有內容：

試試這個：

location.assign("http://www.google.com");

示例的代碼段。

我只需要用另一個更新的jQuery方法來更新這種荒謬：

var url = 'http://www.fiftywaystoleaveyourlocation.com';
$(location).prop('href', url);

那麼，問題是如何製作重定向頁面，而不是如何重定向到網站？

您只需要使用JavaScript即可。這是一些將創建動態重定向頁面的小代碼。

<script>
    var url = window.location.search.split('url=')[1]; // Get the URL after ?url=
    if( url ) window.location.replace(url);
</script>

所以說你只需把這個片段放到你網站上的redirect/index.html文件中就可以這樣使用了。

http://www.mywebsite.com/redirect?url=http://.com

如果您轉到該鏈接，它將自動將您重定向到.com 。

鏈接到文檔

這就是你用JavaScript創建一個簡單的重定向頁面的方法

編輯：

還有一點需要注意。我在我的代碼中添加了window.location.replace ，因為我認為它適合重定向頁面，但是，你必須知道當使用window.location.replace並且你被重定向時，當你在瀏覽器中按下後退按鈕時它不會回到重定向頁面，它會回到之前的頁面，看看這個小小的演示內容。

例：

過程： store home => redirect page to google => google
在google： google => 後退按鈕在瀏覽器 => 存儲主頁

所以，如果這符合您的需求，那麼一切都應該沒問題。如果要在瀏覽器歷史記錄中包含重定向頁面，請替換此頁面

if( url ) window.location.replace(url);

同

if( url ) window.location.href = url;

這適用於jQuery：

$(window).attr("location", "http://google.fr");

Angular1

對於使用AngularJS人來說，可以使用Promises。

Here說，

Promise可用於取消異步函數，並允許將多個函數鏈接在一起。

你也可以here找到一個很好的解釋。

在下面提到的docs中找到的示例。

  promiseB = promiseA.then(
    function onSuccess(result) {
      return result + 1;
    }
    ,function onError(err) {
      //Handle error
    }
  );

 // promiseB will be resolved immediately after promiseA is resolved 
 // and its value will be the result of promiseA incremented by 1.

Angular2和Later

在Angular2看下面的例子中，但recommended使用Observables它Angular2。

 search(term: string) {
     return this.http
  .get(`https://api.spotify.com/v1/search?q=${term}&type=artist`)
  .map((response) => response.json())
  .toPromise();

}

你可以用這種方式消費，

search() {
    this.searchService.search(this.searchField.value)
      .then((result) => {
    this.result = result.artists.items;
  })
  .catch((error) => console.error(error));
}

在這裡查看original帖子。但是Typescript不支持原生的es6 Promises，如果你想使用它，你可能需要插件。

此外，這裡是promises spec定義。