javascript 網頁重定向 如何重定向到其他網頁?
php轉址 (20)
標準的“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;
}
}
https://code.i-harness.com
如何使用jQuery或純JavaScript將用戶從一個頁面重定向到另一個頁面?
警告:此答案僅作為可能的解決方案提供; 它顯然不是最好的解決方案,因為它需要jQuery。 相反,更喜歡純JavaScript解決方案。
$(location).attr('href', 'http://.com')
一個不是簡單地使用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”,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,您只需一兩行即可連接到此代碼。
#HTML頁面重定向使用jQuery / JavaScript
試試這個示例代碼:
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是一個用於DOM操作的JavaScript庫。 所以你不應該使用jQuery進行頁面重定向。
來自Jquery.com的報價:
雖然jQuery可能在較舊的瀏覽器版本中沒有出現重大問題,但我們並不主動測試它們中的jQuery,並且通常不會修復可能出現在它們中的錯誤。
它在這裡找到: https://jquery.com/browser-support/ : https://jquery.com/browser-support/
因此,jQuery並不是一種能夠實現向後兼容的最終解決方案。
以下使用原始JavaScript的解決方案適用於所有瀏覽器,並且已經標準很長時間,因此您不需要任何庫來支持跨瀏覽器。
此頁面將在3000毫秒後重定向到google.com
<!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刷新
<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=en&ref_topic=6001971 : 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>
如果您將兩個頁面示例組合在一起,您將擁有一個嬰兒循環重新路由,這將保證您的用戶永遠不會再想要再次使用您的網站。
但如果有人想重定向回主頁,那麼他可能會使用以下代碼段。
window.location = window.location.host
如果您有三個不同的環境,如開發,登台和生產,將會很有幫助。
只需將這些單詞放在Chrome控制台或Firebug的控制台中,即可瀏覽此窗口或window.location對象。
你可以在沒有jQuery的情況下做到這一點:
window.location = "http://yourdomain.com";
如果你只想要jQuery那麼你可以這樣做:
$jq(window).attr("location","http://yourdomain.com");
先寫好。 您希望在應用程序中導航,從您的應用程序中為另一個鏈接導航。 這是代碼:
window.location.href = "http://www.google.com";
如果你想在你的應用程序中導航頁面,那麼我也有代碼,如果你想。
在JavaScript和jQuery中,我們可以使用以下代碼將一個頁面重定向到另一個頁面:
window.location.href="http://google.com";
window.location.replace("page1.html");
基本上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");
我還會在下面的圖片中顯示所有內容:
如果你對你想做的事情有一點描述性,那將會很有幫助。 如果您嘗試生成分頁數據,則有一些選項可用於執行此操作。 您可以為希望能夠直接訪問的每個頁面生成單獨的鏈接。
<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).attr("href","http://.com");
如果您沒有jQuery,請使用JavaScript:
window.location.replace("http://.com");
window.location.href("http://.com");
我還認為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 -->
有三種主要方法可以做到這一點,
window.location.href='blaah.com';
window.location.assign('blaah.com');
和...
window.location.replace('blaah.com');
對於傳統的重定向,最後一個是最好的,因為它不會保存您在搜索歷史記錄中重定向之前所訪問的頁面。但是,如果您只想打開帶有JavaScript的選項卡,則可以使用上述任何一個選項卡。 1
編輯:window
前綴是可選的。
這是一個延時重定向。 您可以將延遲時間設置為您想要的任何值:
<!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 = 'your_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;