Chuyển hướng trang web sau một khoảng thời gian nhất định

135

Tôi phải làm gì để có một chức năng trên một trang web nơi nó nói rằng nó sẽ chuyển hướng bạn đến trang web trong 3 giây hoặc lâu hơn?

html redirect

— mã hóa
nguồn

2

có thể trùng lặp Làm thế nào tôi có thể chuyển hướng đến một trang (nhà) thông qua một trang khác (trang thành công) trong đó một số thông báo thành công sẽ được hiển thị?

— kennytm

Tôi chỉ tò mò, tại sao bạn lại muốn làm điều đó? Mỗi lần tôi truy cập trang như vậy, tôi muốn được hướng dẫn trong 0 giây.

— allesklar

@allesklar xin lỗi vì đã trả lời trễ. Tôi đang phát triển một trang web và tôi muốn xem liệu có dễ dàng hơn để chuyển từ trình chỉnh sửa mã sang trình duyệt web mà không cần làm mới mọi lúc.

— mã hóa

Trình tạo chuyển hướng JS này sẽ giúp bạn dễ dàng tạo các đoạn chuyển hướng bị trì hoãn. Nó có hỗ trợ noscript và seo, cộng với có IE 8 - và thấp hơn - sửa lỗi để vượt qua người giới thiệu http!

— Patartics Milán

1

@allesklar một ví dụ để sử dụng này. Nếu bạn thay đổi tên miền của mình và muốn mọi người được chuyển hướng đến tên miền mới trong tháng đầu tiên (nhưng hãy cho họ biết tên miền cũ sẽ bị xóa sau một tháng hoặc lâu hơn). Bởi vì ngay cả khi bạn gửi và gửi email, vẫn luôn có một số người quên và truy cập tên miền cũ.

— patricia

209

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

— Darin Dimitrov
nguồn

Hoặc chỉ cần chuyển hướng đến thư mục gốc nếu bạn có nhiều trang web sử dụng <meta http-Equiv = "refresh" content = "3; url = /" />

— DJSampat

1

W3C khuyến nghị thẻ này không được sử dụng: w3.org/TR/WCAG10-HTML-TECHS/#meta-element

— huseyin39

69

Có lẽ bạn đang tìm kiếm meta refreshthẻ :

<html>
    <head>
        <meta http-equiv="refresh" content="3;url=http://www.somewhere.com/" />
    </head>
    <body>
        <h1>Redirecting in 3 seconds...</h1>
    </body>
</html>

Lưu ý rằng việc sử dụng meta refreshbị phản đối và cau mày vào những ngày này, nhưng đôi khi đó là tùy chọn khả thi duy nhất (ví dụ: nếu bạn không thể tạo các tiêu đề chuyển hướng HTTP phía máy chủ và / hoặc bạn cần hỗ trợ các máy khách không phải JavaScript, v.v. ).

— Luke
nguồn

52

Nếu bạn muốn kiểm soát tốt hơn, bạn có thể sử dụng javascript thay vì sử dụng thẻ meta. Điều này sẽ cho phép bạn có một hình ảnh của một số loại, ví dụ như đếm ngược.

Đây là một cách tiếp cận rất cơ bản bằng cách sử dụng setTimeout()

<html>
    <body>
    <p>You will be redirected in 3 seconds</p>
    <script>
        var timer = setTimeout(function() {
            window.location='http://example.com'
        }, 3000);
    </script>
</body>
</html>

Mở rộng đoạn trích

— moustvoort
nguồn

Đây sẽ là cách để đi nếu bạn muốn văn bản tự động đếm ngược về 0 trước khi chuyển hướng. Sử dụng bộ hẹn giờ 1 giây, trong đó chức năng hẹn giờ cập nhật văn bản HTML và sau đó bắt đầu bộ hẹn giờ 1 giây mới, cho đến khi 3 giây trôi qua, sau đó thực hiện chuyển hướng.

— Rémy Lebeau

19

Đây là một ví dụ hoàn chỉnh (đơn giản) về chuyển hướng sau X giây, trong khi cập nhật div div:

<html>
<body>
    <div id="counter">5</div>
    <script>
        setInterval(function() {
            var div = document.querySelector("#counter");
            var count = div.textContent * 1 - 1;
            div.textContent = count;
            if (count <= 0) {
                window.location.replace("https://example.com");
            }
        }, 1000);
    </script>
</body>
</html>

Mở rộng đoạn trích

Nội dung ban đầu của counterdiv là số giây chờ đợi.

— noamtm
nguồn

Điều này đã không hoạt động cho đến khi tôi thay thế location.href="https://example.com";bằngwindow.location='https://example.com'

— NateH06

1

Có thể tốt hơn để sử dụng window.location.replace("http://example.com");cho các lý do được thảo luận ở đây: stackoverflow.com/a/506004 Thay đổi sẽ cung cấp câu trả lời này rộng rãi hơn.

— Tâm lý

10

Cách đơn giản nhất là sử dụng thẻ HTML META như thế này:

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

Wikipedia

— Ehsan
nguồn

4

Đặt mã chuyển hướng HTML sau đây giữa và các thẻ của mã HTML của bạn.

<meta HTTP-EQUIV="REFRESH" content="3; url=http://www.yourdomain.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. Nội dung = "3; 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. 4, 5, 8, 10 hoặc 15 giây, v.v.

— Muhammad Saqib
nguồn

1

Sử dụng mã javascript đơn giản này để chuyển hướng trang này sang trang khác bằng khoảng thời gian cụ thể ...

Vui lòng thêm mã này vào trang web của bạn, nơi bạn muốn chuyển hướng:

<script type="text/javascript">
(function(){
   setTimeout(function(){
     window.location="http://brightwaay.com/";
   },3000); /* 1000 = 1 second*/
})();
</script>

— Nắng SM
nguồn

<meta http-equiv="refresh" content="3;url=http://example.com/" />là một lựa chọn tốt hơn vì nó đơn giản hơn và hoạt động mà không cần hỗ trợ JavaScript.

— Edward

bạn nói đúng ... nhưng tùy thuộc vào tình huống .. đôi khi chúng ta cần chuyển hướng vào sự kiện cụ thể để JS là lựa chọn tốt nhất.

— Sunny SM

Tôi hiểu ý bạn, "Sunny SM". Mặc dù các thẻ meta nên được sử dụng hầu như luôn luôn, nhưng có thể có các kịch bản cụ thể như của bạn trong đó JavaScript sẽ là tùy chọn duy nhất.

— Edward