Câu hỏi Chuyển hướng từ trang HTML


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?


1357
2018-03-23 20:58


gốc


Để tuân thủ 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 tính năng nâng cao này trình tạo chuyển hướng - Patartics Milán
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 sẽ vẫn hoạt động. - flith
insider.zone/tools/client-side-url-redirect-generator Là một công cụ nhỏ đẹp đảm bảo tính tương thích. - mackycheese21


Các câu trả lời:


Thử sử dụng:

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

Lưu ý: Đặt nó vào phần đầu.

Ngoài ra, đối với các trình duyệt cũ hơn nếu bạn thêm 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 như

Chuyển hướng

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


1934
2018-03-23 21:00



Sử dụng làm mới meta được khuyến khích bởi World Wide Web Consortium (W3C). Tham khảo: en.wikipedia.org/wiki/Meta_refresh. Vì vậy, chúng tôi khuyên bạn nên 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
FYI, 0 có nghĩa là làm mới sau 0 giây. Bạn có thể muốn cung cấp cho người dùng thêm thời gian để biết điều gì đang xảy ra. - Dennis
@Paul Draper, tùy thuộc vào máy chủ bạn đang chạy - Gal Margalit
Tôi đã thêm thẻ đóng để tôn trọng các đặc tả XHTML5. - ZenLulz
Nhận xét của @ NinethSense giúp làm mới meta có vẻ như một chuyển hướng JavaScript. Làm mới meta là không phải JS và sẽ vẫn hoạt động khi JS bị tắt. - Druska


Tôi sẽ sử dụng cả hai metaMã 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 thành, 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 301 mã trạng thái. Điều này dễ thực hiện thông qua .htaccess tệp sử dụng Apachehoặc qua nhiều plugin bằng WordPress. Tôi chắc chắn cũng có cá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.


1009
2018-03-23 21:04



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
@enyo Tôi không phải là một fan hâm mộ lớn của việc thả body thẻ và các loại 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 rìa nó gây ra vấn đề, và lợi ích có vẻ nhỏ. - Billy Moon
@ Fricker bởi vì họ có thể không nhấp chuột. Họ có thể kiểm soát bằng giọng nói, khai thác hoặc điều hướng theo một cách nào đó. Đó là một hướng dẫn khả năng truy cập để tuân thủ các tiêu chuẩn cho các điều khiển, như sử dụng thuộc tính HTML A chuẩn cho liên kết, và nghĩ về nó, và giao tiếp nó như một liên kết, và không quy định cách một người nào đó phải tương tác với nó. Ngoài ra, có click here trên một liên kết không được thông báo, vì trình đọc màn hình sẽ khó điều hướng hơn. Các 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 nó và tuy nhiên họ tương tác với nó. - Billy Moon
@BillyMoon, Trên thực tế ý nghĩa của "click" đã được quá tải để bao gồm tất cả những ý nghĩa là tốt. "bấm" sẽ làm tốt. - Pacerier
@BillyMoon trong những trường hợp thỉnh thoảng trình duyệt bỏ qua 0 làm mới giá trị meta? Cảm ơn! - Gal Margalit


JavaScript

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

Thẻ meta

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

110
2018-03-23 21:01





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

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

40
2018-02-06 00:34



Bạn sẽ sử dụng một liên kết kinh điển ngoài một chuyển hướng? en.wikipedia.org/wiki/Canonical_link_element nói rằng Google thích sử dụng chuyển hướng hơn thay vì một liên kết kinh điển. - LarsH
@ larsH Vì vậy, điều quan trọng nhất đối với SEO, đó có phải là liên kết chuyển hướng hoặc trang đích cuối cùng không? - Chakotay


Thẻ meta sau, được đặt giữa bên trong đầu, sẽ yêu cầu 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ờ trước khi chuyển hướng và thay thế URL bằng URL bạn muốn chuyển hướng đến.

Ngoài ra, bạn có thể chuyển hướng bằng JavaScript. Đặt điều này bên trong thẻ tập lệnh ở bất kỳ đâu trên trang:

window.location = "URL"

27
2018-03-23 21:01





Đâ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() chức năng 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 thay thế URL:

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

Qua jQuery:

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

3. Làm mới Meta

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

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 cáo của Billy Moon, bạn có thể cung cấp liên kết làm mới trong trường hợp có 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


27
2017-11-06 10:19



Ví dụ "Via jQuery" của bạn không sử dụng bất kỳ jQuery nào. - Justin Johnson
Đừng gọi setTimeout với một chuỗi. Thay vào đó, hãy chuyển một hàm. - Oriol
"Làm mới HTTP Header 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? - Mateusz Konieczny


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


26
2018-02-21 15:18



Liên kết bài viết đã cho không còn hoạt động nữa. Đã chuyển đến đây: support.google.com/webmasters/bin/… - Buggieboy
Câu hỏi cụ thể 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 không thể thực hiện được trong các trường hợp như vậy - Nicolas Raoul
Ahaha @ Buggieboy rất buồn cười! The article about redirect has not be redirected... sorry for the inconvenience ;) - Pierre Ozoux
Liên kết hoạt động! Việc chuyển hướng nó là quan trọng để đảm bảo bạn chuyển hướng xử lý tốt nhất thành phần SEO. - Mike


Nếu bạn mong muốn tuân thủ các tiêu chuẩn web hiện đại, bạn nên tránh chuyển hướng meta HTML thuần túy. 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 đã tắt JavaScript, hãy thêm một dòng chuyển hướng meta HTML vào noscript thành phần. Các noscript chuyển hướng meta lồng nhau kết hợp với canonical cũng sẽ giúp xếp hạng công cụ tìm kiếm của bạn.

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

Một phía khách hàng thích hợp Chuyển hướng URL mã 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 -->

21
2017-09-13 09:37



w3.org/TR/WCAG10-HTML-TECHS/#meta-element bao gồm chi tiết về lý do <meta http-equiv="refresh" không được W3C chấp nhận. - daxelrod


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

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

hoặc là JavaScript chuyển hướng (lưu ý rằng không phải tất cả người dùng đều đã bật JavaScript để 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 muốn khuyên bạn nên sử dụng mod_rewrite, nếu bạn có tùy chọn.


17
2018-03-23 21:01



mod_rewrite (chỉ) áp dụng cho Apache. - Paul Draper
Về Apache: Tại sao mod_rewrite và không phải là một chỉ thị Redirect đơn giản mà không có và thêm module? - vog


Ngay sau khi tải trang, init chức năng đượ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>

14
2018-04-14 16:52





Đặt mã sau 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. Các 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.


10
2018-02-02 19:07