القائمة الرئيسية

الصفحات

 JavaScript - Page Redirection



What is Page Redirection ?

You might have encountered a situation where you clicked a URL to reach a page X but internally you were directed to another page Y. It happens due to page redirection. This concept is different from JavaScript Page Refresh.

There could be various reasons why you would like to redirect a user from the original page. We are listing down a few of the reasons −

  • You did not like the name of your domain and you are moving to a new one. In such a scenario, you may want to direct all your visitors to the new site. Here you can maintain your old domain but put a single page with a page redirection such that all your old domain visitors can come to your new domain.

  • You have built-up various pages based on browser versions or their names or may be based on different countries, then instead of using your server-side page redirection, you can use client-side page redirection to land your users on the appropriate page.

  • The Search Engines may have already indexed your pages. But while moving to another domain, you would not like to lose your visitors coming through search engines. So you can use client-side page redirection. But keep in mind this should not be done to fool the search engine, it could lead your site to get banned.

How Page Re-direction Works ?

The implementations of Page-Redirection are as follows.

Example 1

It is quite simple to do a page redirect using JavaScript at client side. To redirect your site visitors to a new page, you just need to add a line in your head section as follows.

ما هي إعادة توجيه الصفحة؟ ربما واجهت موقفًا قمت فيه بالنقر فوق عنوان URL للوصول إلى صفحة X ولكن داخليًا تم توجيهك إلى صفحة أخرى Y. يحدث ذلك بسبب إعادة توجيه الصفحة. يختلف هذا المفهوم عن تحديث صفحة JavaScript. قد تكون هناك أسباب مختلفة وراء رغبتك في إعادة توجيه المستخدم من الصفحة الأصلية. نحن ندرج بعض الأسباب - لم يعجبك اسم المجال الخاص بك وأنت تنتقل إلى مجال جديد. في مثل هذا السيناريو ، قد ترغب في توجيه جميع زوار موقعك إلى الموقع الجديد. هنا يمكنك الحفاظ على المجال القديم الخاص بك ولكن ضع صفحة واحدة مع إعادة توجيه الصفحة بحيث يمكن لجميع زوار المجال القديم الخاص بك القدوم إلى المجال الجديد الخاص بك. لقد أنشأت صفحات متنوعة بناءً على إصدارات المستعرض أو أسمائها أو قد تستند إلى بلدان مختلفة ، فبدلاً من استخدام إعادة توجيه الصفحة من جانب الخادم ، يمكنك استخدام إعادة توجيه الصفحة من جانب العميل لتوجيه المستخدمين إلى الصفحة المناسبة. ربما قامت محركات البحث بفهرسة صفحاتك بالفعل. ولكن أثناء الانتقال إلى مجال آخر ، لن ترغب في فقدان زوار موقعك القادمين من خلال محركات البحث. لذلك يمكنك استخدام إعادة توجيه الصفحة من جانب العميل. لكن ضع في اعتبارك أن هذا لا ينبغي أن يتم لخداع محرك البحث ، فقد يؤدي ذلك إلى حظر موقعك. كيف تعمل إعادة توجيه الصفحة؟ فيما يلي تطبيقات إعادة توجيه الصفحة. مثال 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>
Example 2

You can show an appropriate message to your site visitors before redirecting them to a new page. This would need a bit time delay to load a new page. The following example shows how to implement the same. Here setTimeout() is a built-in JavaScript function which can be used to execute another function after a given time interval.

يمكنك إظهار الرسالة المناسبة لزوار موقعك قبل إعادة توجيههم إلى صفحة جديدة. قد يتطلب هذا تأخيرًا زمنيًا قليلاً لتحميل صفحة جديدة. يوضح المثال التالي كيفية تنفيذ نفس الشيء. هنا 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>

Output

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

Example 3

The following example shows how to redirect your site visitors onto a different page based on their browsers.

<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>
هل اعجبك الموضوع :

تعليقات