Chuyển hướng từ một trang HTML

1580

Có thể thiết lập một trang HTML cơ bản để chuyển hướng đến một trang khác khi tải không?

html  redirect  xhtml  meta  html-head 
— chobo
nguồn
28
Để tuân theo các tiêu chuẩn web hiện đại và cung cấp chức năng trình duyệt chéo, tôi thích sử dụng trình tạo chuyển hướng
— Patartics Milán
1
Sử dụng .htaccess hoặc IIS tương đương để thực hiện chuyển hướng phía máy chủ. Bằng cách đó, ngay cả khi trang vật lý của bạn biến mất, chuyển hướng vẫn sẽ hoạt động.
— với
1
insider.zone/tools/client-side-url-redirect-generator Là một công cụ nhỏ xinh đảm bảo khả năng tương thích.
— mackycheese21
2
Công cụ insider.zone đó đã khiến tôi chuyển hướng tất cả chữ thường, gây ra 404s. Thêm vào đó, không có cách nào để liên lạc với bất cứ ai làm trang về nó.
— Dan Jacobson

Câu trả lời:

2151

Hãy thử sử dụng:

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

Lưu ý: Đặt nó trong phần đầu.

Ngoài ra, đối với các trình duyệt cũ hơn nếu bạn thêm một liên kết nhanh trong trường hợp nó không làm mới chính xác:

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

Sẽ xuất hiện dưới dạng

Chuyển hướng

Điều này vẫn sẽ cho phép bạn đến nơi bạn đang đi với một nhấp chuột bổ sung.

— Valerij
nguồn
151
Việc sử dụng meta refresh không được World Wide Web Consortium (W3C) khuyến khích. Tham chiếu: en.wikipedia.org/wiki/Meta_Vfresh . Vì vậy, nó được khuyến khích sử dụng chuyển hướng máy chủ thay thế. Chuyển hướng JavaScript có thể không hoạt động trên tất cả các điện thoại di động vì JavaScript có thể bị tắt.
— NinethSense
61
FYI, 0phương tiện để làm mới sau 0 giây. Bạn có thể muốn cho người dùng thêm thời gian để biết chuyện gì đang xảy ra.
— Dennis
5
@Paul Draper, điều đó phụ thuộc vào máy chủ bạn đang chạy
— Gal Margalit
9
Tôi đã thêm việc đóng thẻ để tôn trọng các thông số kỹ thuật XHTML5.
— ZenLulz
98
Nhận xét của @ NinethSense làm cho meta refresh có vẻ giống như một chuyển hướng JavaScript. Meta refresh không phải là JS và vẫn sẽ hoạt động khi JS bị vô hiệu hóa.
— Druska
1104

Tôi sẽ sử dụng cả meta và mã JavaScript và sẽ có một liên kết chỉ trong trường hợp.

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

Để hoàn thiện, tôi nghĩ cách tốt nhất, nếu có thể, là sử dụng chuyển hướng máy chủ, vì vậy hãy gửi mã trạng thái 301 . Điều này rất dễ thực hiện thông qua .htaccesscác tệp bằng Apache hoặc qua nhiều plugin bằng WordPress . Tôi chắc chắn cũng có plugin cho tất cả các hệ thống quản lý nội dung chính. Ngoài ra, cPanel có cấu hình rất dễ dàng cho chuyển hướng 301 nếu bạn đã cài đặt trên máy chủ của mình.

— Billy Moon
nguồn
12
Trang chuyển hướng này có thể ngắn gọn hơn nhiều với HTML5: pastebin.com/2qmfUZMk (hoạt động trong tất cả các trình duyệt và vượt qua xác thực w3c)
— enyo
9
@enyo Tôi không phải là một fan hâm mộ lớn của việc bỏ các bodythẻ và những thứ tương tự. Có lẽ nó xác nhận, và có lẽ hoạt động trong các trình duyệt phổ biến. Tôi chắc chắn có một số trường hợp bên lề nó gây ra vấn đề, và lợi ích có vẻ nhỏ.
— Billy Moon
9
@Fricker vì họ có thể không nhấp chuột. Họ có thể kiểm soát thông qua giọng nói, khai thác hoặc điều hướng theo một cách nào đó không xác định. Đó là một hướng dẫn về khả năng truy cập để tuân theo các tiêu chuẩn cho các điều khiển, như sử dụng thuộc tính HTML A tiêu chuẩn cho liên kết, và nghĩ về nó, và truyền đạt nó như một liên kết và không quy định cách ai đó phải tương tác với nó. Ngoài ra, click herekhông nên sử dụng liên kết, vì trình đọc màn hình sẽ khó điều hướng hơn. Liên kết nên có trên văn bản mô tả đích đến, vì vậy người dùng biết nơi họ sẽ đến trước khi theo dõi và tuy nhiên họ tương tác với nó.
— Billy Moon
2
@BillyMoon, Thật ra ý nghĩa của "nhấp chuột" đã bị quá tải để bao gồm tất cả những ý nghĩa đó. "Bấm" sẽ làm tốt.
— Pacerier
2
@BillyMoon trong những trường hợp không thường xuyên, trình duyệt bỏ qua 0 meta meta refresh? Cảm ơn!
— Gal Margalit
125

JavaScript

<script type="text/javascript">
    window.location.href = "http://example.com";
</script>

Thẻ meta

<meta http-equiv="refresh" content="0;url=http://example.com">
— amit_g
nguồn
40

Tôi cũng sẽ thêm một liên kết chuẩn để giúp những người làm SEO của bạn :

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>
— lrkwz
nguồn
3
Bạn sẽ sử dụng một liên kết chính tắc ngoài một chuyển hướng? vi.wikipedia.org/wiki/Canonical_link_element nói rằng Google thích sử dụng chuyển hướng thay vì liên kết chính tắc.
— LarsH
1
@larsH Vậy điều gì quan trọng nhất đối với SEO, đó là liên kết chuyển hướng hoặc trang đích cuối cùng?
— Chakotay
— Marc.2377
28

Thẻ meta sau, được đặt giữa bên trong đầu, sẽ cho trình duyệt chuyển hướng:

<meta http-equiv="Refresh" content="seconds; url=URL">

Thay thế giây bằng số giây chờ đợi trước khi nó chuyển hướng và thay thế URL bằng URL bạn muốn nó chuyển hướng đến.

Ngoài ra, bạn có thể chuyển hướng với JavaScript. Đặt cái này bên trong thẻ script ở bất cứ đâu trên trang:

window.location = "URL"
— Peter Olson
nguồn
28

Đây là tổng hợp của tất cả các câu trả lời trước đó cộng với một giải pháp bổ sung bằng cách sử dụng HTTP Refresh Header qua .htaccess

1. Tiêu đề làm mới HTTP

Trước hết, bạn có thể sử dụng .htaccess để đặt tiêu đề làm mới như thế này

Header set Refresh "3"

Đây là tương đương "tĩnh" của việc sử dụng header()hàm trong PHP

header("refresh: 3;");

Lưu ý rằng giải pháp này không được hỗ trợ bởi mọi trình duyệt.

2. JavaScript

Với một URL thay thế :

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

Không có URL thay thế:

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

Thông qua jQuery:

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

3. Làm mới Meta

Bạn có thể sử dụng meta refresh khi không phụ thuộc vào JavaScript và tiêu đề chuyển hướng

Với một URL thay thế:

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

Không có URL thay thế:

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

Sử dụng <noscript>:

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

Tùy chọn

Theo khuyến nghị của Billy Moon, bạn có thể cung cấp một liên kết làm mới trong trường hợp xảy ra sự cố:

Nếu bạn không được chuyển hướng tự động: <a href='http://example.com/alternat_url.html'>Click here</a>

Tài nguyên

— RafaSashi
nguồn
12
Ví dụ "Via jQuery" của bạn không sử dụng bất kỳ jQuery nào.
— Justin Johnson
2
Đừng gọi setTimeoutbằng một chuỗi. Vượt qua một chức năng thay thế.
— Oriol
"Tiêu đề làm mới HTTP thông qua .htaccess" - tại sao nó có liên quan trong câu hỏi hỏi về chuyển hướng từ trang HTML?
— giảm hoạt động
26

Nó sẽ tốt hơn để thiết lập một chuyển hướng 301 . Xem bài viết Chuyển hướng 301 của Công cụ quản trị trang web của Google .

— Alex K
nguồn
13
Câu hỏi đặc biệt yêu cầu một trang .html cơ bản. Tôi đoán người hỏi không thể sửa đổi .htaccess hoặc tương tự (ví dụ: sử dụng Github Pages hoặc lưu trữ giới hạn tương tự). 301 là không thể thực hiện được trong những trường hợp như vậy
— Nicolas Raoul
26

Nếu bạn đang mong muốn tuân theo các tiêu chuẩn web hiện đại, bạn nên tránh các chuyển hướng meta HTML đơn giản. Nếu bạn không thể tạo mã phía máy chủ, bạn nên chọn chuyển hướng JavaScript thay thế.

Để hỗ trợ các trình duyệt bị vô hiệu hóa JavaScript, hãy thêm một dòng chuyển hướng meta HTML vào một noscriptphần tử. Các noscriptmeta chuyển hướng lồng nhau kết hợp với canonicalthẻ sẽ giúp thứ hạng công cụ tìm kiếm của bạn là tốt.

Nếu bạn muốn tránh các vòng lặp chuyển hướng, bạn nên sử dụng location.replace()hàm JavaScript.

Mã chuyển hướng URL phía máy khách phù hợp trông như thế này (với Internet Explorer 8 và bản sửa lỗi thấp hơn và không chậm trễ):

<!-- 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://stackoverflow.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0; URL=https://stackoverflow.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://stackoverflow.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 -->
— Patartics Milán
nguồn
2
w3.org/TR/WCAG10-HTML-TECHS/#meta-element bao gồm các chi tiết về lý do tại sao <meta http-equiv="refresh"W3C không được chấp nhận.
— daxelrod
Các đối số mà w3c cung cấp đối với các chuyển hướng HTML cũng được áp dụng cho các chuyển hướng Javascript. Ngoài ra, chuyển hướng Javascript yêu cầu bật javascript, trái ngược với chuyển hướng HTML. Do đó, chuyển hướng HTML hoàn toàn tốt hơn chuyển hướng Javascript trong trường hợp người ta có thể sử dụng cả hai.
— Tối đa
17

Bạn có thể sử dụng "chuyển hướng" META :

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

hoặc chuyển hướng JavaScript (lưu ý rằng không phải tất cả người dùng đều bật JavaScript nên luôn chuẩn bị giải pháp sao lưu cho họ)

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

Nhưng tôi khuyên bạn nên sử dụng mod_rewrite , nếu bạn có tùy chọn.

— Công nghệ
nguồn
5
mod_rewrite (chỉ) áp dụng cho Apache.
— Paul Draper
1
Về Apache: Tại sao mod_rewrite và không phải là một lệnh Redirect đơn giản mà không có mô-đun bổ sung?
— vog
14

Ngay khi tải trang, initchức năng sẽ được kích hoạt và trang được chuyển hướng:

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

    <body onload="init()">
    </body>
</html>
— kkk
nguồn
10

Đặt mã sau đây giữa các thẻ <HEAD> và </ HEAD> của mã HTML của bạn:

<meta HTTP-EQUIV="REFRESH" content="0; url=http://example.com/index.html">

Mã chuyển hướng HTML ở trên sẽ chuyển hướng khách truy cập của bạn đến một trang web khác ngay lập tức. Số content="0;có thể được thay đổi thành số giây bạn muốn trình duyệt chờ trước khi chuyển hướng.

— Muhammad Saqib
nguồn
9

Đặt mã sau vào <head>phần:

<meta http-equiv="refresh" content="0; url=http://address/">
— Sầu riêng
nguồn
9

Tôi đã gặp sự cố khi làm việc với ứng dụng jQuery Mobile , trong một số trường hợp, thẻ tiêu đề Meta của tôi không đạt được chuyển hướng đúng cách (jQuery Mobile không tự động đọc các tiêu đề cho mỗi trang nên việc đặt JavaScript cũng không hiệu quả trừ khi gói nó vào độ phức tạp). Tôi đã tìm thấy giải pháp đơn giản nhất trong trường hợp này là đặt chuyển hướng JavaScript trực tiếp vào phần thân của tài liệu, như sau:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="refresh" content="0;url=myURL" />
    </head>

    <body>
        <p>You are not logged in!</p>
        <script language="javascript">
            window.location = "myURL";
        </script>
    </body>
</html>

Điều này dường như làm việc trong mọi trường hợp đối với tôi.

— người Scotland
nguồn
8

Cách đơn giản để làm việc cho tất cả các loại trang chỉ là thêm một metathẻ vào đầu:

<html>
    <head>
        ...
        <meta HTTP-EQUIV="REFRESH" content="seconds; url=your.full.url/path/filename">
        ...
    </head>
    <body>
        Don't put much content, just some text and an anchor.
        Actually, you will be redirected in N seconds (as specified in content attribute).
        That's all.
        ...
    </body>
</html>
— P. BANERJEE
nguồn
7

Bạn nên sử dụng JavaScript. Đặt mã sau vào thẻ đầu của bạn:

<script type="text/javascript">
 window.location.assign("http://www.example.com")
</script>
— kriscross07
nguồn
7

Bạn có thể tự động chuyển hướng bằng Mã trạng thái HTTP 301 hoặc 302.

Đối với PHP:

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>
— Vô Vị
nguồn
6
Đó không phải là một chuyển hướng từ một trang HTML.
— bugmenot123
7

Tôi sử dụng tập lệnh chuyển hướng người dùng từ index.html sang url tương đối của Trang đăng nhập

<html>
  <head>
    <title>index.html</title>
  </head>
  <body onload="document.getElementById('lnkhome').click();">
    <a href="/Pages/Login.aspx" id="lnkhome">Go to Login Page<a>
  </body>
</html>
— Zolfaghari
nguồn
1
Chuyển hướng url trong phương pháp trên có thể là tương đối. ví dụ: bạn muốn chuyển hướng đến trang Đăng nhập hoặc bất kỳ trang tương đối nào theo index.html trong thư mục gốc của trang web. không cần biết tên miền của bạn. nhưng khi bạn đặt window.location.href = "xxx"; bạn phải biết tên miền.
— Zolfaghari
6

Chỉ cho biện pháp tốt:

<?php
header("Location: example@example.com", TRUE, 303);
exit;
?>

Hãy chắc chắn rằng không có tiếng vang phía trên tập lệnh nếu không nó sẽ bị bỏ qua. http://php.net/manual/en/feft.header.php

— Edward
nguồn
9
Câu hỏi đặc biệt yêu cầu một trang .html cơ bản. Tôi đoán người hỏi không thể sửa đổi .htaccess hoặc tương tự (ví dụ: sử dụng Github Pages hoặc lưu trữ giới hạn tương tự). PHP không có sẵn trong các trường hợp như vậy.
— Nicolas Raoul
Tôi sẽ coi một cái gì đó được tạo bởi PHP (Bộ xử lý tiền siêu văn bản) là "trang HTML cơ bản". Không ở đâu trong câu hỏi nó đề cập đến một loại tập tin.
— Edward
6

Chỉ cần sử dụng sự kiện onload của thẻ body:

<body onload="window.location = 'http://example.com/'">
— vỗ vai
nguồn
5 
<!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>
— PoM
nguồn
4

Bạn không cần bất kỳ mã JavaScript nào cho việc này. Viết phần này trong <head>phần của trang HTML:

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

Ngay khi trang tải xuống 0 giây, bạn có thể truy cập trang của mình.

— Yash Jain
nguồn
1
điều này đã được bao gồm trong câu trả lời được chấp nhận và nhận xét hàng đầu - xem xét chỉnh sửa câu trả lời hơn là đăng một bản sao
— RozzA
3

Theo như tôi hiểu, tất cả các phương pháp tôi đã thấy cho đến nay cho câu hỏi này dường như thêm vị trí cũ vào lịch sử. Để chuyển hướng trang, nhưng không có vị trí cũ trong lịch sử, tôi sử dụng replacephương pháp:

<script>
    window.location.replace("http://example.com");
</script>
— Paul Ogilvie
nguồn
2

Đây là một giải pháp chuyển hướng với mọi thứ tôi muốn nhưng không thể tìm thấy trong một đoạn mã sạch đẹp để cắt và dán.

Đoạn mã này có một số lợi thế:

  • cho phép bạn bắt và giữ lại bất kỳ thông số chuỗi truy vấn nào có trong url của họ
  • làm cho liên kết unueue để tránh bộ nhớ đệm không mong muốn
  • cho phép bạn thông báo cho người dùng về tên trang web cũ và mới
  • hiển thị đếm ngược ổn định
  • có thể được sử dụng cho các chuyển hướng liên kết sâu khi giữ lại các thông số

Cách sử dụng:

Nếu bạn đã di chuyển toàn bộ một trang thì trên máy chủ cũ sẽ dừng trang gốc và tạo một trang khác với tệp này làm tệp index.html mặc định trong thư mục gốc. Chỉnh sửa cài đặt trang để bất kỳ lỗi 404 nào được chuyển hướng đến trang index.html này. Điều này bắt bất cứ ai truy cập trang web cũ với một liên kết vào một trang cấp phụ, v.v.

Bây giờ, hãy chuyển đến thẻ script mở và chỉnh sửa địa chỉ web oldsite và newSite và thay đổi giá trị giây nếu cần.

Lưu và bắt đầu trang web của bạn. Công việc đã hoàn thành - thời gian cho một ly cà phê.

<!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>
Mở rộng đoạn trích

— Vanquished Wombat
nguồn
1

Chuyển hướng bằng cách sử dụng JavaScript, <noscript>trong trường hợp JS bị vô hiệu hóa.

<script>
    window.location.replace("https://google.com");
</script>

<noscript>
    <a href="https://google.com">Click here if you are not redirected automatically.</a>
</noscript>
— Aryan Beezadhur
nguồn
0

Sử dụng mã này:

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

Hãy chú ý: đặt nó trong thẻ đầu.

— AmerllicA
nguồn
Tôi không biết tại sao câu trả lời của tôi downvote hai lần? nó hoạt động đúng
— AmerllicA
Giải pháp tương tự được đăng bởi bạn đã được đăng bởi nhiều người dùng trước đó.
— Rahul Shah
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.