JavaScript - การเปลี่ยนเส้นทางหน้า

Page Redirection คืออะไร?

คุณอาจพบสถานการณ์ที่คุณคลิก URL เพื่อไปยังหน้า X แต่ภายในคุณถูกนำไปยังหน้าอื่น Y มันเกิดขึ้นเนื่องจาก page redirection. แนวคิดนี้จะแตกต่างจากJavaScript หน้ารีเฟรช

อาจมีสาเหตุหลายประการที่คุณต้องการเปลี่ยนเส้นทางผู้ใช้จากหน้าเดิม เรากำลังแสดงเหตุผลบางประการ -

คุณไม่ชอบชื่อโดเมนของคุณและคุณกำลังจะย้ายไปยังโดเมนใหม่ ในสถานการณ์ดังกล่าวคุณอาจต้องการนำผู้เยี่ยมชมทั้งหมดของคุณไปยังไซต์ใหม่ ที่นี่คุณสามารถรักษาโดเมนเก่าของคุณ แต่ใส่หน้าเดียวที่มีการเปลี่ยนเส้นทางเพจเพื่อให้ผู้เยี่ยมชมโดเมนเก่าของคุณเข้ามาที่โดเมนใหม่ของคุณได้
คุณได้สร้างเพจต่างๆตามเวอร์ชันของเบราว์เซอร์หรือชื่อของหน้าเหล่านั้นหรืออาจขึ้นอยู่กับประเทศต่างๆจากนั้นแทนที่จะใช้การเปลี่ยนเส้นทางเพจฝั่งเซิร์ฟเวอร์คุณสามารถใช้การเปลี่ยนเส้นทางเพจฝั่งไคลเอ็นต์เพื่อนำผู้ใช้ของคุณไปยังเพจที่เหมาะสมได้
เครื่องมือค้นหาอาจจัดทำดัชนีหน้าเว็บของคุณแล้ว แต่ในขณะที่ย้ายไปยังโดเมนอื่นคุณไม่ต้องการสูญเสียผู้เยี่ยมชมที่มาจากเครื่องมือค้นหา คุณจึงสามารถใช้การเปลี่ยนเส้นทางเพจฝั่งไคลเอ็นต์ได้ แต่อย่าลืมว่าไม่ควรทำเพื่อหลอกเครื่องมือค้นหาเพราะอาจทำให้ไซต์ของคุณถูกแบนได้

Page Re-direction ทำงานอย่างไร

การปรับใช้ Page-Redirection มีดังต่อไปนี้

ตัวอย่าง 1

การเปลี่ยนเส้นทางเพจโดยใช้ JavaScript ที่ฝั่งไคลเอ็นต์นั้นค่อนข้างง่าย ในการเปลี่ยนเส้นทางผู้เยี่ยมชมไซต์ของคุณไปยังหน้าใหม่คุณเพียงแค่เพิ่มบรรทัดในส่วนหัวของคุณดังนี้

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.tutorialspoint.com";
            }
         //-->
      </script>
   </head>
   
   <body>
      <p>Click the following button, you will be redirected to home page.</p>
      
      <form>
         <input type = "button" value = "Redirect Me" onclick = "Redirect();" />
      </form>
      
   </body>
</html>

เอาต์พุต

ตัวอย่าง 2

คุณสามารถแสดงข้อความที่เหมาะสมแก่ผู้เยี่ยมชมไซต์ของคุณก่อนที่จะเปลี่ยนเส้นทางไปยังหน้าใหม่ การดำเนินการนี้จะต้องมีการหน่วงเวลาเล็กน้อยเพื่อโหลดหน้าใหม่ ตัวอย่างต่อไปนี้แสดงวิธีการใช้งานแบบเดียวกัน ที่นี่setTimeout() เป็นฟังก์ชัน JavaScript ในตัวซึ่งสามารถใช้เพื่อเรียกใช้ฟังก์ชันอื่นหลังจากช่วงเวลาที่กำหนด

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.tutorialspoint.com";
            }            
            document.write("You will be redirected to main page in 10 sec.");
            setTimeout('Redirect()', 10000);
         //-->
      </script>
   </head>
   
   <body>
   </body>
</html>

เอาต์พุต

You will be redirected to tutorialspoint.com main page in 10 seconds!

ตัวอย่างที่ 3

ตัวอย่างต่อไปนี้แสดงวิธีเปลี่ยนเส้นทางผู้เยี่ยมชมไซต์ของคุณไปยังหน้าอื่นตามเบราว์เซอร์ของพวกเขา

<html>
   <head>     
      <script type = "text/javascript">
         <!--
            var browsername = navigator.appName;
            if( browsername == "Netscape" ) {
               window.location = "http://www.location.com/ns.htm";
            } else if ( browsername =="Microsoft Internet Explorer") {
               window.location = "http://www.location.com/ie.htm";
            } else {
               window.location = "http://www.location.com/other.htm";
            }
         //-->
      </script>      
   </head>
   
   <body>
   </body>
</html>