شنبه ۲۹ دي ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

آموزش جاوا اسکریپت - تغییر مسیر صفحه

هدایت صفحه چیست؟

ممکن است به موقعیتی برخورد کرده باشید که با کلیک روی یک URL برای رسیدن به صفحه X، به صورت داخلی به صفحه Y هدایت شدید. این به دلیل هدایت صفحه رخ می‌دهد. این مفهوم با بازیابی صفحه جاوااسکریپت متفاوت است.

ممکن است به دلایل مختلفی بخواهید یک کاربر را از صفحه اصلی هدایت کنید. چند دلیل از آنها را لیست می‌کنیم:

  • شما نام دامنه خود را دوست نداشتید و به یک دامنه جدید منتقل می‌شوید. در چنین حالتی، ممکن است بخواهید همه بازدیدکنندگان خود را به سایت جدید هدایت کنید. در اینجا می‌توانید دامنه قدیمی خود را حفظ کرده و یک صفحه واحد با هدایت صفحه قرار دهید تا همه بازدیدکنندگان دامنه قدیمی شما بتوانند به دامنه جدید شما بروند.

  • شما براساس نسخه‌های مرورگر، نام‌های آن‌ها یا شاید براساس کشورهای مختلف، صفحات مختلفی ایجاد کرده‌اید، در این صورت به جای استفاده از هدایت صفحه سمت سرور، می‌توانید از هدایت صفحه سمت مشتری برای رساندن کاربران به صفحه مناسب استفاده کنید.

  • موتورهای جستجو ممکن است صفحات شما را قبلاً فهرست کرده باشند. اما در هنگام انتقال به دامنه دیگر، شما نمی‌خواهید بازدیدکنندگانی که از طریق موتورهای جستجو به سایت شما آمده‌اند را از دست بدهید. بنابراین می‌توانید از هدایت صفحه سمت مشتری استفاده کنید. اما به خاطر داشته باشید که این کار نباید برای فریب موتورهای جستجو انجام شود، زیرا ممکن است منجر به محرومیت سایت شما شود.

چگونه هدایت صفحه کار می‌کند؟

اجرای Page-Redirection به شکل زیر است.

مثال ۱

انجام page redirection با استفاده از JavaScript در سمت کلاینت بسیار ساده است. برای ریدایرکت کاربران سایت شما به یک صفحه جدید، فقط کافی است یک خط کد در بخش head صفحه خود قرار دهید، به شکل زیر.


<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.example.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>

مثال ۲

شما می‌توانید پیام مناسبی را به بازدیدکنندگان سایت خود نمایش دهید، پیش از ریدایرکت کردن آن‌ها به یک صفحه جدید. برای این کار، نیاز به تأخیری کوتاه برای بارگذاری صفحه جدید دارید. مثال زیر نشان می‌دهد که چگونه این کار را انجام دهید. در اینجا، setTimeout() یک تابع JavaScript داخلی است که می‌توانید از آن برای اجرای یک تابع دیگر پس از مدت زمان مشخصی استفاده کنید.


<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.example.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 example.com main page in 10 seconds!

مثال سوم

مثال زیر نشان می‌دهد که چگونه با توجه به نوع مرورگر کاربران، با استفاده از جاوااسکریپت، آن‌ها را به صفحه‌های مختلفی هدایت کنید.


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