[英]How do I redirect to another webpage?
如何使用 jQuery 或純 JavaScript 將用戶從一個頁面重定向到另一個頁面？
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";
警告：此答案僅作為一種可能的解決方案提供； 這顯然不是最好的解決方案，因為它需要 jQuery。 相反，更喜歡純 JavaScript 解決方案。
$(location).prop('href', 'http://stackoverflow.com')
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 粘貼、會話等）進行測試可以幫助判斷請求是否合法。 （注意：還有一些方法可以解決/欺騙這些引薦來源網址，正如評論中的 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;
}
}
有很多方法可以做到這一點。
// 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.href = 'your_url';
如果您對您正在嘗試做的事情更具描述性，那將會有所幫助。 如果您嘗試生成分頁數據，則可以選擇一些方法來執行此操作。 您可以為希望能夠直接訪問的每個頁面生成單獨的鏈接。
<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
});
});
我也認為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.example/"/>
<noscript>
<meta http-equiv="refresh" content="0;URL=https://yourdomain.example/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
var url = "https://yourdomain.example/";
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 -->
但是如果有人想重定向回主頁，那么他可以使用以下代碼段。
window.location = window.location.host
如果您擁有三個不同的環境（開發、登台和生產），那將會很有幫助。
您只需將這些詞放在 Chrome 控制台或Firebug的控制台中即可探索此 window 或 window.location 對象。
JavaScript 為您提供了許多方法來檢索和更改顯示在瀏覽器地址欄中的當前 URL。 所有這些方法都使用 Location 對象，它是 Window 對象的一個屬性。 您可以創建一個具有當前 URL 的新 Location 對象，如下所示。
var currentLocation = window.location;
URL的基本結構
<protocol>//<hostname>:<port>/<pathname><search><hash>
協議——指定用於訪問 Internet 上的資源的協議名稱。 （HTTP（無 SSL）或 HTTPS（有 SSL））
主機名——主機名指定擁有資源的主機。 例如，www.stackoverflow.com。 服務器使用主機名提供服務。
port -- 一個端口號，用於識別 Internet 或其他網絡消息到達服務器時要轉發到的特定進程。
路徑名——路徑提供有關 Web 客戶端想要訪問的主機中的特定資源的信息。 例如，stackoverflow.com/index.html。
查詢——查詢字符串跟隨路徑組件，並提供資源可用於某些目的的信息字符串（例如，作為搜索的參數或作為要處理的數據）。
hash -- URL 的錨點部分，包括井號 (#)。
使用這些 Location 對象屬性，您可以訪問所有這些 URL 組件
現在，如果您想更改頁面或將用戶重定向到其他頁面，您可以使用 Location 對象的href屬性，如下所示
您可以使用 Location 對象的 href 屬性。
window.location.href = "http://www.stackoverflow.com";
Location Object也有這三個方法
您還可以使用 assign() 和 replace 方法重定向到其他頁面，例如這些
location.assign("http://www.stackoverflow.com");
location.replace("http://www.stackoverflow.com");
assign() 和 replace() 有何不同-- replace() 方法和 assign() 方法() 的區別在於 replace() 從文檔歷史記錄中刪除當前文檔的 URL，意味着不能使用“返回”按鈕導航回原始文檔。 因此，如果您想加載一個新文檔，並希望提供導航回原始文檔的選項，請使用 assign() 方法。
您也可以像這樣使用jQuery更改位置對象 href 屬性
$(location).attr('href',url);
因此，您可以將用戶重定向到其他一些 url。
基本上jQuery只是一個JavaScript框架，在這種情況下，為了做一些事情，比如重定向，你可以只使用純 JavaScript，所以在這種情況下，你有 3 個使用 vanilla JavaScript 的選項：
1）使用 location replace ，這將替換頁面的當前歷史記錄，意味着無法使用返回按鈕返回到原始頁面。
window.location.replace("http://stackoverflow.com");
2）使用 location assign ，這將為您保留歷史記錄，並使用后退按鈕，您可以返回原始頁面：
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");
我也將它們全部顯示在下圖中：
應該可以使用window.location進行設置。
例子：
window.location = "https://stackoverflow.com/";
這是有關該主題的過去帖子： 如何重定向到另一個網頁？
在開始之前，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.href或window.location.assign 。 如果您確實使用了讓用戶返回重定向頁面的選項，請記住，當您進入重定向頁面時，它會將您重定向回來。 因此，在為您的重定向選擇選項時要考慮到這一點。 在頁面僅在用戶完成操作時重定向的情況下，將頁面放在后退按鈕歷史記錄中就可以了。 但是如果頁面自動重定向，那么您應該使用替換，以便用戶可以使用后退按鈕而不會被迫返回重定向發送的頁面。
您還可以使用元數據來運行頁面重定向，如下所示。
元刷新
<meta http-equiv="refresh" content="0;url=http://evil.example/" />
元位置
<meta http-equiv="location" content="URL=http://evil.example" />
基地劫持
<base href="http://evil.example/" />
在此頁面上可以找到更多將您毫無戒心的客戶端重定向到他們可能不希望訪問的頁面的方法（其中不依賴於 jQuery）：
https://code.google.com/p/html5security/wiki/RedirectionMethods
我還想指出，人們不喜歡被隨機重定向。 僅在絕對需要時重定向人員。 如果您開始隨機重定向人們，他們將永遠不會再訪問您的網站。
下一段是假設的：
您也可能被報告為惡意網站。 如果發生這種情況，那么當人們單擊指向您網站的鏈接時，用戶瀏覽器可能會警告他們您的網站是惡意的。 如果人們在您的網站上報告糟糕的體驗，搜索引擎也可能會開始降低您的評分。
請查看有關重定向的 Google 網站管理員指南：https: //support.google.com/webmasters/answer/2721217?hl=en&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>
如果您將兩個頁面示例組合在一起，您將擁有一個重新路由的嬰兒循環，這將保證您的用戶永遠不會想要再次使用您的網站。
var url = 'asdf.html';
window.location.href = url;
你可以在沒有 jQuery 的情況下做到這一點：
window.location = "http://yourdomain.com";
如果你只想要 jQuery，那么你可以這樣做：
$jq(window).attr("location","http://yourdomain.com");
這適用於 jQuery：
$(window).attr("location", "http://google.fr");
# 使用 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"; .
原始問題： “如何使用 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，您只需一兩行即可連接到此代碼。
您需要將此行放入您的代碼中：
$(location).attr("href","http://stackoverflow.com");
如果您沒有 jQuery，請使用 JavaScript：
window.location.replace("http://stackoverflow.com");
window.location.href("http://stackoverflow.com");
所以，問題是如何制作重定向頁面，而不是如何重定向到網站？
您只需要為此使用 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並被重定向時，當您在瀏覽器中按下后退按鈕時，它不會回到重定向頁面，它會回到它之前的頁面，看看這個小演示。
例子：
過程：商店首頁=>將頁面重定向到谷歌=>谷歌
在谷歌時：谷歌=>瀏覽器中的后退按鈕=>商店主頁
因此，如果這符合您的需求，那么一切都應該沒問題。 如果您想在瀏覽器歷史記錄中包含重定向頁面，請替換此
if( url ) window.location.replace(url);
和
if( url ) window.location.href = url;
在您的點擊功能上，只需添加：
window.location.href = "The URL where you want to redirect";
$('#id').click(function(){
window.location.href = "http://www.google.com";
});
不需要 jQuery。 你可以這樣做：
window.open("URL","_self","","")
就是這么容易！
發起 HTTP 請求的最佳方式是使用document.loacation.href.replace('URL') 。
window.location.href="http://google.com";
window.location.replace("http://google.com");
$(location).attr('href', 'http://google.com');
jQuery.fn.redirectTo = function(url){
window.location.href = url;
}
jQuery(window).redirectTo("http://google.com");
先正確寫。 您想在應用程序中導航到另一個鏈接，從您的應用程序中導航到另一個鏈接。 這是代碼：
window.location.href = "http://www.google.com";
如果你想在你的應用程序中導航頁面，那么我也有代碼，如果你願意的話。
您可以像這樣在 jQuery 中重定向：
$(location).attr('href', 'http://yourPage.com/');
JavaScript 非常廣泛。 如果你想跳轉到另一個頁面，你有三個選項。
window.location.href='otherpage.com';
window.location.assign('otherpage.com');
//and...
window.location.replace('otherpage.com');
當您想移動到另一個頁面時，如果這是您的要求，您可以使用其中的任何一個。 然而，所有三個選項都限於不同的情況。 根據您的要求明智地選擇。
如果您對有關該概念的更多知識感興趣，可以進一步了解。
window.location.href; // Returns the href (URL) of the current page
window.location.hostname; // Returns the domain name of the web host
window.location.pathname; // Returns the path and filename of the current page
window.location.protocol; // Returns the web protocol used (http: or https:)
window.location.assign; // Loads a new document
window.location.replace; // RReplace the current location with new one.
在 JavaScript 和 jQuery 中，我們可以使用以下代碼將一個頁面重定向到另一個頁面：
window.location.href="http://google.com";
window.location.replace("page1.html");
Javascript：
window.location.href='www.your_url.com';
window.top.location.href='www.your_url.com';
window.location.replace('www.your_url.com');
查詢：
var url='www.your_url.com';
$(location).attr('href',url);
$(location).prop('href',url);//instead of location you can use window
$({jQueryCode:(url)=>location.replace(url)}).attr("jQueryCode")("http://example.com")
請不要殺我，這是一個笑話。 這是個笑話。 這是個玩笑。
這確實“提供了對問題的答案”，因為它要求“使用 jQuery”的解決方案，在這種情況下需要以某種方式強制它進入等式。
Ferrybig 顯然需要解釋這個笑話（還是在開玩笑，我敢肯定評論表上的選項有限），所以事不宜遲：
其他答案是不必要地在location或window對象上使用 jQuery 的attr() 。
這個答案也濫用了它，但以一種更荒謬的方式。 這不是使用它來設置位置，而是使用attr()來檢索設置位置的函數。
該函數被命名為jQueryCode ，即使它沒有任何關於它的 jQuery，並且調用函數somethingCode實在是太可怕了，尤其是當某物甚至不是一種語言時。
“85 bytes”是對 Code Golf 的引用。 打高爾夫球顯然不是你應該在代碼高爾夫球之外做的事情，而且這個答案顯然不是真正的打高爾夫球。
基本上，畏縮。
這是一個延時重定向。 您可以將延遲時間設置為任何您想要的：
<!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>
有三種主要方法可以做到這一點，
window.location.href='blaah.com';
window.location.assign('blaah.com');
和...
window.location.replace('blaah.com');
最后一個是最好的，對於傳統的重定向，因為它不會保存您在搜索歷史中被重定向之前所訪問的頁面。 但是，如果您只想使用 JavaScript 打開選項卡，則可以使用上述任何一種。 1
編輯： window前綴是可選的。
我只需要用另一種新的jQuery方法來更新這種荒謬性：
var url = 'http://www.fiftywaystoleaveyourlocation.com';
$(location).prop('href', url);
如何使用Javascript或jQuery重定向網頁？ JavaScript重定向
[英]How do I redirect my webpage with Javascript or jQuery ?? Javascript redirect
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.