如何重定向到另一個網頁?

How do I redirect to another webpage?
投票:7727回答:58

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

tags:javascript,jquery,redirect
58回答
140
投票

您可以在沒有jQuery的情況下做到這一點:

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

如果只需要jQuery,則可以這樣做:

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

627
投票

重定向頁面的標準“香草” JavaScript方法

window.location.href = 'newPage.html';

或更簡單地說:(因為window是“全局”)

location.href = 'newPage.html';

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

(否則忽略最後一部分)


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

下面我們將為IE8及更低版本實現替代方案,以免丟失HTTP_REFERER。 否則,您幾乎總是可以簡單地使用window.location.href

測試對HTTP_REFERER (URL粘貼,會話等) 可以在講述一個請求是否合法,有益的。 請注意:還有一些方法可以解決/欺騙這些引薦來源網址,如評論中的下垂鏈接所示)


簡單的跨瀏覽器測試解決方案(對於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; 
    }
}

222
投票

但是,如果有人想重定向回主頁,則可以使用以下代碼段。

window.location = window.location.host

如果您具有三個不同的環境(如開發,登台和生產),這將很有幫助。

您可以通過將這些詞放在Chrome控制台或Firebug的控制台中來探索該window或window.location對象。


71
投票

在點擊功能上,只需添加:

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

158
投票
var url = 'asdf.html';
window.location.href = url;

248
投票

我也認為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 -->

1632
投票

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

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

51
投票

首先正確編寫。 您要在應用程序中導航至另一個鏈接,而在應用程序中導航至另一個鏈接。 這是代碼:

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

而且,如果您想瀏覽應用程序中的頁面,那麼如果需要的話,我也有代碼。


44
投票

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

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

55
投票

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

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

就這麼簡單!

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


76
投票

因此,問題是如何製作重定向頁面,而不是如何重定向到網站?

您只需要為此使用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://stackoverflow.com

而且,如果您轉到該鏈接,它將自動將您重定向到stackoverflow.com

鏈接到文檔

這就是您使用JavaScript創建簡單重定向頁面的方式

編輯:

還有一件事要注意。 我在代碼中添加了window.location.replace ,因為我認為它適合重定向頁面,但是,您必須知道,使用window.location.replace您會被重定向,當您在瀏覽器中按返回按鈕時,它將不會回到重定向頁面,它會回到上一頁,看看這個小演示。

例:

流程: 存儲主頁 => 將頁面重定向到Google => Google

在Google上時: google => 瀏覽器中的後退按鈕 => 存放主頁

因此,如果這符合您的需求,那麼一切都會很好。 如果要在瀏覽器歷史記錄中包括重定向頁面,請替換此頁面

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

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

60
投票

嘗試這個:

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

示例代碼段


40
投票

這是一個延時重定向。 您可以將延遲時間設置為所需的任何值:

<!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>

208
投票

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

var currentLocation = window.location;

URL的基本結構

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

在此處輸入圖片說明

  1. 協議-指定用於訪問Internet上資源的協議名稱。 (HTTP(不帶SSL)或HTTPS(帶SSL))

  2. 主機名-主機名指定擁有資源的主機。 例如,www.stackoverflow.com。 服務器使用主機名提供服務。

  3. 端口-端口號,用於識別Internet或其他網絡消息到達服務器時將轉發到的特定進程。

  4. pathname -路徑提供有關Web客戶端要訪問的主機內特定資源的信息。 例如,stackoverflow.com/index.html。

  5. 查詢-查詢字符串位於路徑部分之後,並提供資源可用於某些目的的一串信息(例如,作為搜索的參數或要處理的數據)。

  6. hash-URL的錨點部分,包括井號(#)。

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

  1. 散列 -Sets或返回URL的錨定部分。
  2. 主機 -Sets或返回URL的主機名和端口。
  3. 主機名 -設置或返回URL的主機名。
  4. HREF -Sets或返回完整的URL。
  5. pathname-設置或返回URL的路徑名。
  6. 端口 -設置或返回的端口號,服務器使用的URL。
  7. protocol-設置或返回URL的協議。
  8. 搜索 -Sets或返回URL的查詢部分

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

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

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

定位對像也有這三種方法

  1. Assign() -加載一個新文檔。
  2. reload() -重新加載當前文檔。
  3. replace() -用一個新文件替換當前文件

您可以使用assign()和replace方法也可以重定向到此類其他頁面

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

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

Assign()和replace()有何 不同-replace()方法和Assign()方法()之間的區別在於replace()從文檔歷史記錄中刪除當前文檔的URL,這意味著無法使用單擊“後退”按鈕可導航回到原始文檔。 因此,如果要加載新文檔,並希望提供導航到原始文檔的選項,請使用assign()方法。

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

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

因此,您可以將用戶重定向到其他URL。


78
投票

您需要將此行放入代碼中:

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

如果您沒有jQuery,請使用JavaScript:

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

414
投票

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

// 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')

87
投票

#使用jQuery / JavaScript重定向HTML頁面

嘗試以下示例代碼:

function YourJavaScriptFunction()
{
    var i = $('#login').val();
    if (i == 'login')
        window.location = "login.php";
    else
        window.location = "Logout.php";
}

如果要提供完整的URL作為window.location = "www.google.co.in";


191
投票

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

例:

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

這是有關該主題的以前的文章: 如何重定向到另一個網頁?


37
投票

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

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

和...

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

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

編輯: window前綴是可選的。


165
投票

在開始之前,jQuery是一個用於DOM操作的JavaScript庫。 因此,您不應該將jQuery用於頁面重定向。

來自Jquery.com的報價:

儘管jQuery可能在較舊的瀏覽器版本中運行時沒有重大問題,但我們並未在其中積極測試jQuery,並且通常不會修復其中可能出現的錯誤。

在這裡找到它: https : //jquery.com/browser-support/

因此,jQuery不是向後兼容的最終解決方案。

以下使用原始JavaScript的解決方案可在所有瀏覽器中使用,並且很長一段時間以來一直是標準的,因此您不需要任何庫即可獲得跨瀏覽器的支持。

此頁面將在3000毫秒後重定向到Google

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <p>You will be redirected to google shortly.</p>
        <script>
            setTimeout(function(){
                window.location.href="http://www.google.com"; // The URL that will be redirected too.
            }, 3000); // The bigger the number the longer the delay.
        </script>
    </body>
</html>

不同的選項如下:

window.location.href="url"; // Simulates normal navigation to a new page
window.location.replace("url"); // Removes current URL from history and replaces it with a new URL
window.location.assign("url"); // Adds new URL to the history stack and redirects to the new URL

window.history.back(); // Simulates a back button click
window.history.go(-1); // Simulates a back button click
window.history.back(-1); // Simulates a back button click
window.navigate("page.html"); // Same as window.location="url"

使用替換時,後退按鈕將不會返回到重定向頁面,就好像它從未在歷史記錄中一樣。 如果希望用戶能夠返回到重定向頁面,請使用window.location.hrefwindow.location.assign 如果您確實使用了允許用戶返回到重定向頁面的選項,請記住,當您進入重定向頁面時,它將重定向您。 因此,在選擇重定向選項時要考慮到這一點。 在僅用戶執行操作時頁面僅重定向的情況下,將頁麵包含在後退按鈕歷史記錄中就可以了。 但是,如果頁面自動重定向,則應使用replace,以便用戶可以使用後退按鈕而不必強制返回到重定向發送的頁面。

您還可以按照以下說明使用元數據來運行頁面重定向。

META刷新

<meta http-equiv="refresh" content="0;url=http://evil.com/" />

META位置

<meta http-equiv="location" content="URL=http://evil.com" />

基地劫持

<base href="http://evil.com/" />

可以在此頁面上找到許多其他方法來將毫無戒心的客戶端重定向到他們可能不希望訪問的頁面(沒有一種方法依賴於jQuery):

https://code.google.com/p/html5security/wiki/RedirectionMethods

我還要指出,人們不喜歡被隨機重定向。 僅在絕對需要時重定向人員。 如果您開始隨機重定向用戶,他們將永遠不會再訪問您的站點。

下一段是假設的:

您也可能被舉報為惡意網站。 如果發生這種情況,那麼當人們單擊指向您網站的鏈接時,用戶瀏覽器可能會警告他們您的網站是惡意的。 如果人們報告您的網站體驗不佳,搜索引擎可能會開始降低您的評分。

請查看有關重定向的Google網站站長指南: https : //support.google.com/webmasters/answer/2721217?hl=zh_CN&ref_topic=6001971

這是一個有趣的小頁面,可將您踢出頁面。

<!DOCTYPE html>
<html>
    <head>
        <title>Go Away</title>
    </head>
    <body>
        <h1>Go Away</h1>
        <script>
            setTimeout(function(){
                window.history.back();
            }, 3000);
        </script>
    </body>
</html>

如果將這兩個頁面示例結合在一起,則會產生一個重新路由的嬰兒循環,這將確保您的用戶永遠不再希望再次使用您的網站。


51
投票

您可以像這樣在jQuery中重定向:

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

74
投票

原始問題: “如何使用jQuery重定向?”,因此答案實現了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,您只需一兩行就可以連接到此代碼。


37
投票

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

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

44
投票

Javascript:

window.location.href='www.your_url.com';
window.top.location.href='www.your_url.com';
window.location.replace('www.your_url.com');

jQuery:

var url='www.your_url.com';
$(location).attr('href',url);
$(location).prop('href',url);//instead of location you can use window

44
投票

ECMAScript 6 + jQuery,85字節

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

請別殺了我,這是個玩笑。 開個玩笑。 這是個玩笑。

從某種意義上說,這確實“提供了問題的答案”,因為它要求“使用jQuery”解決方案,在這種情況下,必須以某種方式將其強制加入方程式。

Ferrybig顯然需要講出這個笑話(仍然是在開玩笑,我敢肯定評論表單上的選擇有限),所以事不宜遲:

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

這個答案也濫用它,但是以一種更荒謬的方式。 而不是使用它來設置位置,而是使用attr()來檢索用於設置位置的函數。

即使沒有jQuery,該函數也被命名為jQueryCode ,並且調用函數somethingCode簡直太可怕了,尤其是當事物甚至不是語言時。

“ 85字節”是對Code Golf的引用。 打高爾夫球顯然不是您應該在標準打高爾夫球之外做的事情,而且顯然,這個答案實際上並不是打高爾夫球。

基本上,畏縮。


319
投票

這適用於所有瀏覽器:

window.location.href = 'your_url';

196
投票

基本上, jQuery只是一個JavaScript框架,在這種情況下,您可以使用純JavaScript來完成諸如重定向之類的操作 ,因此在這種情況下,您可以使用Vanilla JavaScript提供3個選項:

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

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

2)使用位置分配 ,這將為您保留歷史記錄,並使用返回按鈕,您可以返回到原始頁面:

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

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

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

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

我也在下面的圖片中展示了它們:

location.replace location.assign


290
投票

如果您對要執行的操作更具描述性,這將有所幫助。 如果您嘗試生成分頁數據,則在執行此操作時有一些選擇。 您可以為要直接訪問的每個頁面生成單獨的鏈接。

<a href='/path-to-page?page=1' class='pager-link'>1</a>
<a href='/path-to-page?page=2' class='pager-link'>2</a>
<span class='pager-link current-page'>3</a>
...

請注意,示例中的當前頁面在代碼和CSS中的處理方式有所不同。

如果要通過AJAX更改分頁數據,這就是jQuery的用處。您要做的是向與不同頁面相對應的每個定位標記中添加一個點擊處理程序。 該單擊處理程序將調用一些jQuery代碼,然後通過AJAX提取下一頁,並使用新數據更新表。 下面的示例假定您有一個返回新頁面數據的Web服務。

$(document).ready( function() {
    $('a.pager-link').click( function() {
        var page = $(this).attr('href').split(/\?/)[1];
        $.ajax({
            type: 'POST',
            url: '/path-to-service',
            data: page,
            success: function(content) {
               $('#myTable').html(content);  // replace
            }
        });
        return false; // to stop link
    });
});

14358
投票

一個不只是簡單地使用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://stackoverflow.com");

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

140
投票

這適用於jQuery:

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

©2020 sofbug.com - All rights reserved.