เปลี่ยนเส้นทางเว็บไซต์หลังจากระยะเวลาหนึ่ง


137

ฉันต้องทำอย่างไรเพื่อให้มีฟังก์ชั่นบนเว็บไซต์ที่ระบุว่าจะเปลี่ยนเส้นทางคุณไปยังไซต์ภายใน 3 วินาทีหรือมากกว่านั้น



ฉันแค่อยากรู้ว่าทำไมคุณถึงอยากทำเช่นนั้น? ทุกครั้งที่ฉันเข้าชมหน้าดังกล่าวฉันควรจะถูกนำทางใน 0 วินาที
allesklar

@allesklar ขอโทษที่ตอบช้า ฉันกำลังพัฒนาไซต์และฉันต้องการดูว่ามีวิธีที่ง่ายกว่าในการเปลี่ยนจากโปรแกรมแก้ไขโค้ดเป็นเว็บเบราว์เซอร์โดยไม่ต้องกดปุ่มรีเฟรชทุกครั้งหรือไม่
codedude

ตัวสร้างการเปลี่ยนเส้นทาง JSนี้จะช่วยให้คุณสร้างตัวอย่างข้อมูลการเปลี่ยนเส้นทางที่ล่าช้าได้อย่างง่ายดาย มีการรองรับ noscript และ seo รวมทั้งมี IE 8 - และต่ำกว่า - แก้ไขเพื่อส่งผ่าน http referer!
Patartics Milán

1
@allesklar ตัวอย่างหนึ่งที่จะใช้สิ่งนี้ หากคุณเปลี่ยนโดเมนและต้องการให้ทุกคนเปลี่ยนเส้นทางไปยังโดเมนใหม่ในเดือนแรก (แต่การแจ้งให้ทราบโดเมนเก่าจะถูกลบหลังจากนั้นหนึ่งเดือนหรือมากกว่านั้น) เพราะแม้ว่าคุณจะส่งและอีเมลก็ยังมีใครบางคนที่ลืมและไปที่โดเมนเก่าเสมอ
patricia

คำตอบ:


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

หรือเพียงแค่เปลี่ยนเส้นทางไปยังรูทหากคุณมีหลายไซต์โดยใช้ <meta http-equiv = "refresh" content = "3; url = /" />
DJSampat

1
W3C ไม่แนะนำให้ใช้แท็กนี้: w3.org/TR/WCAG10-HTML-TECHS/#meta-element
huseyin39

69

คุณอาจกำลังมองหาmeta refreshแท็ก :

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

โปรดทราบว่าการใช้งานmeta refreshนั้นเลิกใช้แล้วและถูกขมวดคิ้วในทุกวันนี้ แต่บางครั้งก็เป็นทางเลือกเดียวที่ใช้ได้ (ตัวอย่างเช่นหากคุณไม่สามารถสร้างส่วนหัวการเปลี่ยนเส้นทาง HTTP ในฝั่งเซิร์ฟเวอร์และ / หรือคุณต้องรองรับไคลเอนต์ที่ไม่ใช่ JavaScript เป็นต้น ).


54

หากคุณต้องการการควบคุมที่มากขึ้นคุณสามารถใช้จาวาสคริปต์แทนการใช้เมตาแท็ก สิ่งนี้จะช่วยให้คุณเห็นภาพบางอย่างเช่นการนับถอยหลัง

นี่คือวิธีการพื้นฐานโดยใช้ 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>


นี่เป็นวิธีที่จะดำเนินการต่อไปหากคุณต้องการให้ข้อความนับถอยหลังเป็น 0 แบบไดนามิกก่อนที่จะเปลี่ยนเส้นทาง ใช้ตัวจับเวลา 1 วินาทีโดยฟังก์ชันจับเวลาจะอัปเดตข้อความ HTML จากนั้นเริ่มตัวจับเวลาใหม่ 1 วินาทีจนกระทั่งเวลาผ่านไป 3 วินาทีจากนั้นทำการเปลี่ยนเส้นทาง
Remy Lebeau

19

นี่คือตัวอย่างที่สมบูรณ์ (แต่เรียบง่าย) ของการเปลี่ยนเส้นทางหลังจาก X วินาทีในขณะที่อัปเดต 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>

เนื้อหาเริ่มต้นของcounterdiv คือจำนวนวินาทีที่ต้องรอ


สิ่งนี้ใช้ไม่ได้จนกว่าฉันจะแทนที่location.href="https://example.com";ด้วยwindow.location='https://example.com'
NateH06

1
อาจจะดีกว่าที่จะใช้window.location.replace("http://example.com");สำหรับเหตุผลที่กล่าวถึงที่นี่: stackoverflow.com/a/506004การเปลี่ยนแปลงนี้จะช่วยให้คำตอบนี้มีลักษณะทั่วไปมากขึ้น
Psyche

10

วิธีที่ง่ายที่สุดคือการใช้แท็ก HTML META ดังนี้

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

Wikipedia


4

วางโค้ดเปลี่ยนเส้นทาง HTML ต่อไปนี้ระหว่างและแท็กของโค้ด HTML ของคุณ

<meta HTTP-EQUIV="REFRESH" content="3; url=http://www.yourdomain.com/index.html">

โค้ดเปลี่ยนเส้นทาง HTML ข้างต้นจะเปลี่ยนเส้นทางผู้เยี่ยมชมของคุณไปยังหน้าเว็บอื่นทันที เนื้อหา = "3; อาจเปลี่ยนเป็นจำนวนวินาทีที่คุณต้องการให้เบราว์เซอร์รอก่อนที่จะเปลี่ยนเส้นทาง 4, 5, 8, 10 หรือ 15 วินาทีเป็นต้น


1

ใช้โค้ดจาวาสคริปต์ง่ายๆนี้เพื่อเปลี่ยนเส้นทางเพจไปยังเพจอื่นโดยใช้ช่วงเวลาที่กำหนด ...

โปรดเพิ่มรหัสนี้ในหน้าเว็บไซต์ของคุณซึ่งคุณต้องการเปลี่ยนเส้นทาง:

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

<meta http-equiv="refresh" content="3;url=http://example.com/" />เป็นตัวเลือกที่ดีกว่าเนื่องจากง่ายกว่าและทำงานได้โดยไม่ต้องรองรับ JavaScript
Edward

คุณพูดถูก ... แต่มันขึ้นอยู่กับสถานการณ์ .. บางครั้งเราจำเป็นต้องเปลี่ยนเส้นทางไปยังเหตุการณ์เฉพาะสำหรับ JS นั้นเป็นตัวเลือกที่ดีที่สุด
Sunny SM

ฉันเข้าใจว่าคุณหมายถึง "Sunny SM" แม้ว่าควรใช้เมตาแท็กเกือบตลอดเวลา แต่ก็อาจมีสถานการณ์เฉพาะเช่นของคุณโดยที่ JavaScript จะเป็นตัวเลือกเดียว
Edward
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.