轉址網址不變 - 從HTML頁面重定向




網頁自動轉址 (17)

是否有可能設置一個基本的HTML頁面來重定向到加載的另一個頁面?


JavaScript的

<script language="javascript">
    window.location.href = "http://example.com"
</script>

元標記

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


你不需要任何JavaScript代碼。 把它寫在HTML頁面的<head>部分中:

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

一旦頁面在0秒加載,你就可以進入你的頁面。


你應該使用JavaScript。 將以下代碼放在頭標籤中:

<script type="text/javascript">
 window.location.assign("http://www.example.com")
</script>


只要頁面加載, init函數就會被觸發並且頁面被重定向:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script>
            function init()
            {
               window.location.href = "www.wherever.com";
            }
        </script>
    </head>

    <body onload="init()">
    </body>
</html>

嘗試使用:

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

注意:將它放在頭部。

另外對於舊版瀏覽器,如果添加快速鏈接以防止刷新不正確:

<p><a href="http://example.com/">Redirect</a></p>

將顯示為

Redirect

這仍然可以讓您通過額外點擊進入您要去的地方。


如果您期待遵循現代網絡標準,您應該避免純HTML meta重定向。 如果您無法創建服務器端代碼,則應該選擇JavaScript重定向

為了支持JS禁用的瀏覽器,將HTML meta重定向行添加到noscript元素。 noscript嵌套元重定向與canonical標籤相結合,也將有助於您的搜索引擎排名。

我想避免重定向循環,你應該使用location.replace()JavaScript函數。

正確的客戶端URL重定向代碼如下所示(使用IE 8和更低版本的修補程序並且沒有延遲):

<!-- Pleace 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://.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0;URL=https://.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://.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 -->

將以下代碼放在<head>部分中:

<meta http-equiv="refresh" content="0; url=http://address/">

您可以使用META “重定向”:

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

JavaScript重定向(請注意,並非所有用戶都啟用了JavaScript,因此請始終為他們準備備份解決方案)

<script language="javascript">
  window.location = "http://new.example.com/address";
</script>

但是我寧願推薦使用mod_rewrite ,如果你有選擇的話。


還會添加一個規範鏈接來幫助您的SEO人員:

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>

我使用腳本將用戶從index.html重定向到home.html

<html>
  <head>
    <title>index.html</title>
  </head>
  <body onload="document.getElementById('lnkhome').click();">
    <a href="Home.html" id="lnkhome">Go to Home Page<a>
  </body>
</html>

我會同時使用metaJavaScript代碼 ,並且會有鏈接以防萬一。

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="refresh" content="0; url=http://example.com">
        <script type="text/javascript">
            window.location.href = "http://example.com"
        </script>
        <title>Page Redirection</title>
    </head>
    <body>
        <!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
        If you are not redirected automatically, follow this <a href='http://example.com'>link to example</a>.
    </body>
</html>

為了完整起見,我認為最好的方式是,如果可能的話,就是使用服務器重定向,所以發送301狀態碼。 這很容易通過使用Apache .htaccess文件或通過使用WordPress大量插件來完成。 我確信所有主要內容管理系統都有插件。 另外,如果您的服務器上安裝了301重定向,cPanel可以輕鬆配置301重定向。


據我了解,這個問題所見到的所有方法似乎都將舊的位置添加到歷史中。 要重定向頁面,但沒有歷史記錄中的舊位置,請使用replace方法:

<script>
    window.location.replace("http://example.com");
</script>

這是一個重定向解決方案,包含我想要的所有內容,但無法在一個不錯的清理片段中找到剪切和粘貼。

這段代碼有許多優點:

  • 讓你捕捉並保留任何查詢字符串參數在他們的網址上
  • 使鏈接不起作用以避免不必要的緩存
  • 可讓您通知用戶舊的和新的網站名稱
  • 顯示可設定的倒計時
  • 可以用於保留參數的深度鏈接重定向

如何使用:

如果您遷移了整個站點,然後在舊服務器上停止原始站點,並創建另一個文件作為根文件夾中的默認index.html文件。 編輯網站設置,以便將任何404錯誤重定向到此index.html頁面。 這可以捕獲任何訪問舊網站的人,並且可以通過鏈接進入子級頁面等。

現在轉到開始腳本標記並編輯oldsite和newSite Web地址,並根據需要更改秒數值。

保存並啟動您的網站。 工作完成 - 喝咖啡的時間。

<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
<style>
body { margin: 200px; font: 12pt helvetica; }
</style>

</head>
<body>

</body>
<script type="text/javascript">

// Edit these to suit your needs.
var oldsite = 'http://theoldsitename.com'
var newSite = "https://thenewsitename.com";
var seconds = 20;  // countdown delay.

var path = location.pathname;
var srch = location.search;
var uniq = Math.floor((Math.random() * 10000) + 1);
var newPath = newSite + path + (srch === '' ? "?" + uniq : srch + "&" + uniq); 


document.write ('<p>As part of hosting improvements, the system has been migrated from ' + oldsite + ' to</p>');
document.write ('<p><a href="' + newPath + '">' + newSite + '</a></p>');
document.write ('<p>Please take note of the new website address.</p>');
document.write ('<p>If you are not automatically redirected please click the link above to proceed.</p>');
document.write ('<p id="dvCountDown">You will be redirected after <span id = "lblCount"></span>&nbsp;seconds.</p>');

function DelayRedirect() {
    var dvCountDown = document.getElementById("dvCountDown");
    var lblCount = document.getElementById("lblCount");
    dvCountDown.style.display = "block";
    lblCount.innerHTML = seconds;
    setInterval(function () {
        seconds--;
        lblCount.innerHTML = seconds;
        if (seconds == 0) {
            dvCountDown.style.display = "none";
            window.location = newPath;
        }
    }, 1000);
}
DelayRedirect()

</script>
</html>


這是以前所有答案的總和,再加上使用HTTP Refresh Header通過.htaccess的附加解決方案

1. HTTP刷新標題

首先,你可以使用.htaccess像這樣設置一個刷新標題

Header set Refresh "3"

這是在PHP中使用header()函數的“靜態”等價物

header("refresh: 3;");

請注意,每個瀏覽器都不支持此解決方案。

2. JavaScript / jQuery

使用替代URL

<script>
    setTimeout(function(){location.href="http://example.com/alternate_url.html"} , 3000);
</script>

沒有替代網址:

<script>
    setTimeout("location.reload(true);",timeoutPeriod);
</script>

通過jQuery:

<script>
    window.location.reload(true);
</script>

3.元刷新

當JavaScript和重定向標頭的依賴關係不需要時,可以使用元刷新

使用替代網址:

<meta http-equiv="Refresh" content="3; url=http://example.com/alternate_url.html">

沒有替代網址:

<meta http-equiv="Refresh" content="3">

使用<noscript>

<noscript>
    <meta http-equiv="refresh" content="3" />
</noscript>

可選

按照Billy Moon的建議,如果出現問題,您可以提供刷新鏈接:

如果您未自動重定向: <a href='http://example.com/alternat_url.html'>Click here</a>

資源


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Redirect to a page</title>
    </head>
    <body onload="window.location.assign('http://example.com')">

    </body>
</html>






html-head