كيف يمكنني إعادة التوجيه إلى صفحة ويب أخرى؟

سئل على ٢ فبراير ٢٠٠٩  ·  تمت مشاهدة 6.5M مرة  ·  مصدر

venkatachalam picture
في ٢ فبراير ٢٠٠٩

كيف يمكنني إعادة توجيه المستخدم من صفحة إلى أخرى باستخدام jQuery أو JavaScript خالص؟

الإجابات

Ryan McGeary picture
في ٣ فبراير ٢٠٠٩
15172

لا يقوم المرء ببساطة بإعادة التوجيه باستخدام jQuery

jQuery ليس ضروريًا ، و window.location.replace(...) الأفضل لمحاكاة إعادة توجيه HTTP.

window.location.replace(...) أفضل من استخدام window.location.href ، لأن replace() لا يحتفظ بالصفحة الأصلية في محفوظات الجلسة ، مما يعني أن المستخدم لن يعلق في خلفية لا تنتهي أبدًا- إخفاق زر.

إذا كنت تريد محاكاة شخص ما بالنقر فوق ارتباط ، فاستخدم location.href

إذا كنت تريد محاكاة إعادة توجيه HTTP ، فاستخدم location.replace

فمثلا:

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
Boris Guéry picture
في ٢٨ أكتوبر ٢٠٠٩
1719

تحذير: تم تقديم هذه الإجابة فقط كحل ممكن. من الواضح أنه ليس الحل الأفضل ، لأنه يتطلب jQuery. بدلاً من ذلك ، تفضل حل JavaScript النقي.

$(location).attr('href', 'http://stackoverflow.com')
Mark Pieszak - Trilon.io picture
في ٢٧ يوليو ٢٠١٢
719

طريقة جافا سكريبت "الفانيليا" القياسية لإعادة توجيه الصفحة

window.location.href = 'newPage.html';

أو ببساطة أكثر: (بما أن window عالمي)

location.href = 'newPage.html';

إذا كنت هنا لأنك تفقد HTTP_REFERER عند إعادة التوجيه ، فاستمر في القراءة:

(وإلا تجاهل هذا الجزء الأخير)


القسم التالي مخصص لأولئك الذين يستخدمون HTTP_REFERER كواحد من العديد من إجراءات الأمان (على الرغم من أنه ليس إجراء وقائيًا رائعًا). إذا كنت تستخدم Internet Explorer 8 أو إصدارًا أقل ، فستفقد هذه المتغيرات عند استخدام أي شكل من أشكال إعادة توجيه صفحات JavaScript (location.href ، إلخ).

فيما يلي سنقوم بتنفيذ بديل لـ IE8 وأقل حتى لا نفقد HTTP_REFERER. بخلاف ذلك ، يمكنك دائمًا استخدام window.location.href .

يمكن أن يساعد الاختبار مقابل HTTP_REFERER (لصق URL ، الجلسة ، إلخ) في معرفة ما إذا كان الطلب شرعيًا أم لا. ( ملاحظة: هناك أيضًا طرق للتغلب على هذه الإحالات / تزييفها ، كما هو موضح بواسطة رابط droop في التعليقات)


حل اختبار بسيط عبر المستعرضات (الرجوع إلى window.location.href لـ Internet Explorer 9+ وجميع المتصفحات الأخرى)

الاستخدام: redirect('anotherpage.aspx');

function redirect (url) {
    var ua        = navigator.userAgent.toLowerCase(),
        isIE      = ua.indexOf('msie') !== -1,
        version   = parseInt(ua.substr(4, 2), 10);

    // Internet Explorer 8 and lower
    if (isIE && version < 9) {
        var link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click();
    }

    // All other browsers can use the standard window.location.href (they don't lose HTTP_REFERER like Internet Explorer 8 & lower does)
    else { 
        window.location.href = url; 
    }
}
Govind Singh picture
في ٢٨ يناير ٢٠١٤
440

هناك الكثير من الطرق للقيام بذلك.

// window.location
window.location.replace('http://www.example.com')
window.location.assign('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/path'

// window.history
window.history.back()
window.history.go(-1)

// window.navigate; ONLY for old versions of Internet Explorer
window.navigate('top.jsp')


// Probably no bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';

// jQuery
$(location).attr('href','http://www.example.com')
$(window).attr('location','http://www.example.com')
$(location).prop('href', 'http://www.example.com')
Fred picture
في ٢٣ أكتوبر ٢٠١٠
340

يعمل هذا مع كل متصفح:

window.location.href = 'your_url';
tvanfosson picture
في ٢ فبراير ٢٠٠٩
303

سيكون من المفيد أن تكون أكثر وصفيًا فيما تحاول القيام به. إذا كنت تحاول إنشاء بيانات مقسمة إلى صفحات ، فهناك بعض الخيارات في كيفية القيام بذلك. يمكنك إنشاء روابط منفصلة لكل صفحة تريد أن تكون قادرًا على الوصول إليها مباشرة.

<a href='/path-to-page?page=1' class='pager-link'>1</a>
<a href='/path-to-page?page=2' class='pager-link'>2</a>
<span class='pager-link current-page'>3</a>
...

لاحظ أن الصفحة الحالية في المثال يتم التعامل معها بشكل مختلف في الكود ومع CSS.

إذا كنت تريد تغيير البيانات المقسمة إلى صفحات عبر AJAX ، فهذا هو المكان الذي سيأتي فيه jQuery. ما ستفعله هو إضافة معالج نقر إلى كل علامة من علامات الارتساء المطابقة لصفحة مختلفة. سوف يستدعي معالج النقر هذا بعض أكواد jQuery التي تذهب وتجلب الصفحة التالية عبر AJAX وتقوم بتحديث الجدول بالبيانات الجديدة. يفترض المثال أدناه أن لديك خدمة ويب تقوم بإرجاع بيانات الصفحة الجديدة.

$(document).ready( function() {
    $('a.pager-link').click( function() {
        var page = $(this).attr('href').split(/\?/)[1];
        $.ajax({
            type: 'POST',
            url: '/path-to-service',
            data: page,
            success: function(content) {
               $('#myTable').html(content);  // replace
            }
        });
        return false; // to stop link
    });
});
Patartics Mil&#225;n picture
في ٢٥ أبريل ٢٠١٣
257

أعتقد أيضًا أن location.replace(URL) هو أفضل طريقة ، ولكن إذا كنت تريد إخطار محركات البحث بشأن إعادة التوجيه (فهم لا يحللون كود JavaScript لمعرفة إعادة التوجيه) ، فيجب عليك إضافة rel="canonical" meta tag لموقعك على الويب.

تعد إضافة قسم noscript مع علامة وصفية لتحديث HTML حلاً جيدًا أيضًا. أقترح عليك استخدام أداة إعادة توجيه JavaScript هذه لإنشاء عمليات إعادة التوجيه. كما أن لديها دعم Internet Explorer لتمرير مُحيل HTTP.

يبدو رمز عينة بدون تأخير كما يلي:

<!-- Place this snippet right after opening the head tag to make it work properly -->

<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->

<!-- REDIRECTING STARTS -->
<link rel="canonical" href="https://yourdomain.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0;URL=https://yourdomain.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://yourdomain.com/";
    if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
    {
        document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
        var referLink = document.createElement("a");
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    }
    else { window.location.replace(url); } // All other browsers
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->
Nadeem Yasin picture
في ٣٠ أكتوبر ٢٠١٢
231

ولكن إذا أراد شخص ما إعادة التوجيه إلى الصفحة الرئيسية ، فيمكنه استخدام المقتطف التالي.

window.location = window.location.host

سيكون من المفيد إذا كان لديك ثلاث بيئات مختلفة مثل التطوير والتشغيل والإنتاج.

يمكنك استكشاف هذه النافذة أو الكائن window.location بمجرد وضع هذه الكلمات في وحدة تحكم Chrome أو وحدة تحكم Firebug .

Nikhil Agrawal picture
في ٢٣ ديسمبر ٢٠١٣
217

يوفر لك JavaScript العديد من الطرق لاسترداد وتغيير عنوان URL الحالي المعروض في شريط عنوان المتصفح. تستخدم كل هذه الطرق كائن الموقع ، وهو خاصية لكائن النافذة. يمكنك إنشاء كائن موقع جديد له عنوان URL الحالي على النحو التالي ..

var currentLocation = window.location;

الهيكل الأساسي لعنوان URL

<protocol>//<hostname>:<port>/<pathname><search><hash>

enter image description here

  1. البروتوكول - يحدد اسم البروتوكول الذي سيتم استخدامه للوصول إلى المورد على الإنترنت. (HTTP (بدون SSL) أو HTTPS (مع SSL))

  2. اسم المضيف - يحدد اسم المضيف المضيف الذي يمتلك المورد. على سبيل المثال ، www.stackoverflow.com. يوفر الخادم خدمات باستخدام اسم المضيف.

  3. المنفذ - رقم المنفذ المستخدم للتعرف على عملية معينة يتم إعادة توجيه رسالة الإنترنت أو رسالة شبكة أخرى إليها عند وصولها إلى الخادم.

  4. اسم المسار - يعطي المسار معلومات حول المورد المحدد داخل المضيف الذي يريد عميل الويب الوصول إليه. على سبيل المثال ، stackoverflow.com/index.html.

  5. الاستعلام - تتبع سلسلة الاستعلام مكون المسار ، وتوفر سلسلة من المعلومات التي يمكن للمورد استخدامها لبعض الأغراض (على سبيل المثال ، كمعلمات للبحث أو كبيانات يجب معالجتها).

  6. التجزئة - جزء الارتساء من عنوان URL ، يتضمن علامة التجزئة (#).

باستخدام خصائص كائن الموقع هذه ، يمكنك الوصول إلى جميع مكونات URL هذه

  1. التجزئة - لتعيين أو إرجاع جزء الارتساء من عنوان URL.
  2. host -Sets أو إرجاع اسم المضيف ومنفذ URL.
  3. hostname - يحدد أو يعرض اسم المضيف لعنوان URL.
  4. href يضبط أو يعرض عنوان URL بالكامل.
  5. اسم المسار - مجموعات أو إرجاع اسم مسار URL.
  6. ميناء -Sets أو إرجاع رقم المنفذ الاستخدامات الملقم لURL.
  7. بروتوكول - يحدد بروتوكول عنوان URL أو يعرضه.
  8. search - تعيين أو إرجاع جزء الاستعلام من عنوان URL

الآن إذا كنت تريد تغيير صفحة أو إعادة توجيه المستخدم إلى بعض الصفحات الأخرى ، فيمكنك استخدام خاصية href لكائن الموقع مثل هذا

يمكنك استخدام خاصية href لكائن الموقع.

window.location.href = "http://www.stackoverflow.com";

يحتوي كائن الموقع أيضًا على هذه الطرق الثلاث

  1. تعيين () - يتم تحميل مستند جديد.
  2. إعادة تحميل () - لإعادة تحميل المستند الحالي.
  3. استبدال () - لاستبدال المستند الحالي بآخر جديد

يمكنك استخدام طرق التعيين () والاستبدال أيضًا لإعادة التوجيه إلى صفحات أخرى مثل هذه

location.assign("http://www.stackoverflow.com");

location.replace("http://www.stackoverflow.com");

كيف يختلف التعيين () والاستبدال () - الفرق بين طريقة الاستبدال () والطريقة () التعيين () ، هو أن استبدال () يزيل عنوان URL للمستند الحالي من محفوظات المستند ، مما يعني أنه لا يمكن استخدامه زر "رجوع" للعودة إلى المستند الأصلي. لذا استخدم طريقة التعيين () إذا كنت تريد تحميل مستند جديد ، وتريد منح خيار العودة إلى المستند الأصلي.

Alireza picture
في ٢٦ فبراير ٢٠١٧
208

في الأساس jQuery هو مجرد إطار عمل JavaScript وللقيام ببعض الأشياء مثل إعادة التوجيه في هذه الحالة ، يمكنك فقط استخدام JavaScript خالص ، لذلك في هذه الحالة لديك 3 خيارات باستخدام Vanilla JavaScript:

1) عن طريق موقع محل، وهذا سوف يحل محل التاريخ الحالي للصفحة ووسائل أنه ليس من الممكن استخدام الزر مرة أخرى إلى العودة إلى الصفحة الأصلية.

window.location.replace("http://stackoverflow.com");

2) باستخدام تعيين الموقع ، سيحتفظ هذا بالسجل لك وباستخدام زر الرجوع ، يمكنك العودة إلى الصفحة الأصلية:

window.location.assign("http://stackoverflow.com");

3) أوصي باستخدام إحدى الطرق السابقة ، ولكن قد يكون هذا هو الخيار الثالث باستخدام JavaScript خالص:

window.location.href="http://stackoverflow.com";

يمكنك أيضًا كتابة دالة في jQuery للتعامل معها ، ولكن لا يوصى بها لأنها وظيفة JavaScript نقية بسطر واحد فقط ، كما يمكنك استخدام جميع الوظائف المذكورة أعلاه بدون نافذة إذا كنت بالفعل في نطاق النافذة ، على سبيل المثال window.location.replace("http://stackoverflow.com"); يمكن أن يكون location.replace("http://stackoverflow.com");

كما أريهم جميعًا في الصورة أدناه:

location.replace location.assign