شرح تفصيلي لحل مشكلة اعتراض window.open من قبل المتصفح

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

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

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

على سبيل المثال، إذا تم تنفيذه مباشرةً في js، فسيتم تنفيذ الكود التالي:

رمز شبيبة:

 // افتح الصفحة مباشرة window.open('//www.baidu.com', '_blank');

المتصفح ie8 كروم 40 فايرفوكس 34 أوبرا 27 سفاري 5.1.7

ما إذا كان سيتم منع NNYYY من الظهور وللرمز التالي:

رمز شبيبة:

 document.body.addEventListener('click', function() { window.open('//www.baidu.com', '_blank'); });

جميع المتصفحات لن تمنعه.

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

1. استخدم علامة بدلاً من ذلك

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

رمز شبيبة:

 function newWin(url, id) { var a = document.createElement('a'); a.setAttribute('href', url); ', id); // منع الإضافة المتكررة if(!document.getElementById(id)) document.body.appendChild(a);}

2. استخدم طريقة إرسال النموذج لفتح صفحة

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

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

3. الحل النهائي - قم بفتح النافذة أولاً، ثم قم بإعادة التوجيه

الحل الثالث هو في الواقع حل بديل. الفكرة الأساسية هي: افتح الصفحة أولاً من خلال نقرات المستخدم، ثم قم بإعادة توجيه الصفحة. رمز العينة هو كما يلي.

رمز شبيبة:

 xx.addEventListener('click', function () { // افتح الصفحة، من الأفضل استخدام صفحة المطالبة هنا var newWin = window.open('loading page'); ajax().done(function() { // كرر مباشرة إلى الصفحة المستهدفة newWin.location.href = 'target url' });

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

الحل الثاني:

 <a href=javascript:; onclick=dialog();>انقر على النافذة المنبثقة</a><script>function programming(){ $.ajax({ url: 'url', type: 'POST', dataType: 'json', async: false, // يجب تعريف هذا على أنه بيانات متزامنة: {param1: 'value1'}, Success: function(data){ window.open(data.url, '_blank'); نافذة منبثقة} })} </script>

عيوب هذه الطريقة:

يمكن للاختبار الفعلي أن يحل مشكلة الاعتراض لمعظم المتصفحات، لكنه لا يستطيع حل اعتراض برامج الأمان (360 لن يعترض، لكن QQ Butler سيفعل ذلك)

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.