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




jquery redirect (25)

ليست هناك حاجة jQuery. انت تستطيع فعل ذالك:

window.open("URL","_self","","")

هذا سهل!

أفضل طريقة لبدء طلب HTTP هي مع document.loacation.href.replace('URL') .

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


قبل البدء ، jQuery هي مكتبة جافا سكريبت المستخدمة في معالجة DOM. لذلك يجب ألا تستخدم jQuery لإعادة توجيه الصفحة.

اقتباس من Jquery.com:

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

تم العثور عليه هنا: https://jquery.com/browser-support/

لذا ، لا يعد jQuery حلًا نهائيًا للجميع ويكون متوافقًا مع التوافق مع الإصدارات السابقة.

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

ستعيد هذه الصفحة التوجيه إلى google.com بعد 3000 ميللي ثانية

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <p>You will be redirected to google shortly.</p>
        <script>
            setTimeout(function(){
                window.location.href="http://www.google.com"; // The URL that will be redirected too.
            }, 3000); // The bigger the number the longer the delay.
        </script>
    </body>
</html>

الخيارات المختلفة هي كما يلي:

window.location.href="url"; // Simulates normal navigation to a new page
window.location.replace("url"); // Removes current URL from history and replaces it with a new URL
window.location.assign("url"); // Adds new URL to the history stack and redirects to the new URL

window.history.back(); // Simulates a back button click
window.history.go(-1); // Simulates a back button click
window.history.back(-1); // Simulates a back button click
window.navigate("page.html"); // Same as window.location="url"

عند استخدام الاستبدال ، لن يعود زر الرجوع إلى صفحة إعادة التوجيه ، كما لو أنه لم يكن في التاريخ أبدًا. إذا كنت تريد أن يتمكن المستخدم من الرجوع إلى صفحة إعادة التوجيه ، فاستخدم window.location.href أو window.location.assign . إذا كنت تستخدم خيارًا يسمح للمستخدم بالعودة إلى صفحة إعادة التوجيه ، فتذكر أنه عند إدخال صفحة إعادة التوجيه ، ستعيد توجيهك مرة أخرى. لذا ضع ذلك في الاعتبار عند اختيار خيار لإعادة التوجيه. في الحالات التي تكون فيها الصفحة تعيد التوجيه فقط عند تنفيذ إجراء من جانب المستخدم ، فإن عرض الصفحة في سجل زر الرجوع سيكون مقبولًا. ولكن إذا تمت إعادة توجيه الصفحة تلقائيًا ، فيجب استخدام الاستبدال بحيث يمكن للمستخدم استخدام زر الرجوع دون الرجوع إلى الصفحة التي يرسلها إعادة التوجيه.

يمكنك أيضًا استخدام بيانات التعريف لتشغيل إعادة توجيه الصفحة كما هو متبع.

META تحديث

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

META الموقع

<meta http-equiv="location" content="URL=http://evil.com" />

اختطاف BASE

<base href="http://evil.com/" />

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

https://code.google.com/p/html5security/wiki/RedirectionMethods

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

الجزء التالي هو افتراضي:

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

يرجى مراجعة إرشادات مشرفي المواقع من Google حول عمليات إعادة التوجيه: https://support.google.com/webmasters/answer/2721217?hl=en&ref_topic=6001971

إليك صفحة صغيرة مرحة تخرجك من الصفحة.

<!DOCTYPE html>
<html>
    <head>
        <title>Go Away</title>
    </head>
    <body>
        <h1>Go Away</h1>
        <script>
            setTimeout(function(){
                window.history.back();
            }, 3000);
        </script>
    </body>
</html>

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


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

var currentLocation = window.location;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. assign () - يقوم بتحميل مستند جديد.
  2. إعادة تحميل () - إعادة تحميل المستند الحالي.
  3. replace () - يستبدل المستند الحالي بأخرى جديدة

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

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

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

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

يمكنك تغيير خاصية href لكائن الموقع باستخدام jQuery أيضًا مثل هذا

$(location).attr('href',url);

وبالتالي يمكنك إعادة توجيه المستخدم إلى عنوان URL آخر.


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

<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
    });
});

يمكنك إعادة التوجيه في jQuery مثل هذا:

$(location).attr('href', 'http://yourPage.com/');

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

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

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

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

هناك ثلاث طرق رئيسية للقيام بذلك ،

window.location.href='blaah.com';
window.location.assign('blaah.com');

و...

window.location.replace('blaah.com');

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

تحرير: windowالبادئة اختيارية.


واحد لا يعيد ببساطة استخدام 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://.com");

// similar behavior as clicking on a link
window.location.href = "http://.com";

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

window.location.href = 'your_url';


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

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

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

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

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

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

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

Usage: 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; 
    }
}

اكتب أولا بشكل صحيح. تريد التنقل داخل تطبيق لرابط آخر من تطبيقك لرابط آخر. هنا هو الرمز:

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

وإذا كنت ترغب في تصفح الصفحات داخل التطبيق الخاص بك ، فإن لدي أيضًا رمزًا ، إذا كنت تريد ذلك.



لذا ، فإن السؤال هو كيفية إنشاء صفحة إعادة توجيه ، وليس كيفية إعادة التوجيه إلى موقع على شبكة الإنترنت؟

ما عليك سوى استخدام جافا سكريبت لهذا. إليك بعض الرموز الصغيرة التي ستنشئ صفحة إعادة توجيه ديناميكية.

<script>
    var url = window.location.search.split('url=')[1]; // Get the URL after ?url=
    if( url ) window.location.replace(url);
</script>

لذا لنفترض أنك وضعت هذا المقتطف في ملف redirect/index.html على موقعك على الويب ، يمكنك استخدامه كهذا.

http://www.mywebsite.com/redirect?url=http://.com

وإذا انتقلت إلى هذا الرابط ، فستتم إعادة توجيهك تلقائيًا إلى موقع .com .

رابط للتوثيق

وهذه هي الطريقة التي تُجري بها صفحة إعادة توجيه بسيطة باستخدام جافا سكريبت

تصحيح:

هناك أيضا شيء واحد أن نلاحظ. لقد أضفت window.location.replace في window.location.replace لأنني أعتقد أنها تناسب صفحة إعادة التوجيه ، ولكن يجب أن تعرف أنه عند استخدام window.location.replace إعادة توجيهك ، عند الضغط على زر الرجوع في متصفحك ، عادت إلى صفحة إعادة التوجيه ، وستعود إلى الصفحة المعروضة عليها ، وألقِ نظرة على هذا الشيء التجريبي الصغير.

مثال:

العملية: تخزين الصفحة الرئيسية >> إعادة توجيه الصفحة إلى google => google

عندما تكون في google: google => زر الرجوع في المتصفح => تخزين المنزل

لذا ، إذا كان هذا يناسب احتياجاتك ، فيجب أن يكون كل شيء على ما يرام. إذا كنت تريد تضمين صفحة إعادة التوجيه في محفوظات المستعرض ، فاستبدلها

if( url ) window.location.replace(url);

مع

if( url ) window.location.href = url;

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

window.location = window.location.host

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

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


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

$(location).attr('href', 'http://.com')

جافا سكريبت:

window.location.href='www.your_url.com';
window.top.location.href='www.your_url.com';
window.location.replace('www.your_url.com');

مسج:

var url='www.your_url.com';
$(location).attr('href',url);
$(location).prop('href',url);//instead of location you can use window

استعمال:

// 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')

فيما يلي إعادة توجيه تأخير الوقت. يمكنك ضبط وقت التأخير على كل ما تريد:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Your Document Title</title>
    <script type="text/javascript">
        function delayer(delay) {
            onLoad = setTimeout('window.location.href = "http://www.google.com/"', delay);
        }
    </script>
</head>

<body>
    <script>
        delayer(8000)
    </script>
    <div>You will be redirected in 8 seconds!</div>
</body>

</html>

أنا فقط اضطررت لتحديث هذا السخافة من خلال طريقة jQuery أحدث:

var url = 'http://www.fiftywaystoleaveyourlocation.com';
$(location).prop('href', url);

***** وكان السؤال الأصلي - "كيفية إعادة استخدام استخدام JQUERY" ، ومن ثم جواب تطبيقات الجواب >> حالة الاستعانة بالمتطلبات *****

لإعادة التوجيه فقط إلى صفحة باستخدام JavaScript:

  window.location.href = "/contact/";

أو إذا كنت بحاجة إلى تأخير:

setTimeout(function () {
  window.location.href = "/contact/";
}, 2000);   // Time in milliseconds

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

     $('a,img').on('click',function(e){
         e.preventDefault();
         $(this).animate({
             opacity: 0 //Put some CSS animation here
         }, 500);
         setTimeout(function(){
           // OK, finished jQuery staff, let's go redirect
           window.location.href = "/contact/";
         },500);
     });

تخيل شخص ما كتب البرنامج النصي / البرنامج المساعد الذي هو 10000 سطر من التعليمات البرمجية ؟! حسنًا ، باستخدام jQuery ، يمكنك الاتصال بهذا الرمز مع سطر أو خطين فقط.


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

window.location.href="http://google.com";
window.location.replace("page1.html");

ECMAScript 6 + jQuery ، 85 بايت

$({jQueryCode:(url)=>location.replace(url)}).attr("jQueryCode")("http://example.com")

من فضلك لا تقتلني ، هذه مزحة. إنها مزحة - إنها فكاهة. انها مزحة.

هذا "يوفر إجابة على السؤال" ، بمعنى أنه طلب حل "باستخدام jQuery" والذي في هذه الحالة يستلزم إجباره في المعادلة بطريقة ما.

يبدو أن Ferrybig يحتاج إلى شرح النكتة (لا يزال يمزح ، أنا متأكد من أن هناك خيارات محدودة في نموذج المراجعة) ، لذلك دون مزيد من اللغط:

إجابات أخرى تستخدم attr() jQuery على كائنات location أو window دون داع.

هذه الإجابة تسيء إليها أيضًا ، ولكن بطريقة أكثر سخرية. بدلاً من استخدامه لتعيين الموقع ، يستخدم هذا attr() لاسترداد دالة تقوم بتعيين الموقع.

يتم تسمية هذه الوظيفة jQueryCodeعلى الرغم من عدم وجود شيء jQuery حولها ، والدعوة إلى وظيفة somethingCodeأمر مروع ، وخاصة عندما لا يكون هناك شيء حتى لغة.

"85 بايت" هو مرجع إلى Code Golf. من الواضح أن لعبة الجولف ليست شيئًا يجب عليك فعله خارج لعبة الغولف ، علاوة على ذلك ، فإن هذه الإجابة ليست لعبة غولف.

أساسا ، تذلل.


var url = 'asdf.html';
window.location.href = url;

طريقة أكثر بساطة:

var timeStamp=event.timestamp || new Date().getTime();




javascript jquery redirect