حل مشكلة عدم دعم Chrome لمحادثة النافذة العدوانية وعدم إمكانية العودة إلى قيمة العائد

ماذا؟ تم تعطيل نافذة المودال؟

في الأسبوع الماضي، قمت بتعديل مشروع إدارة الخلفية للتجربة، عند اختبار توافق هذا المشروع مع المتصفحات المختلفة، وجدت أن طريقة showModalDialog في متصفح chrome لا تظهر نافذة模دالية، مثل فتح صفحة جديدة، يمكن للنافذة الأم أن تحصل على焦点 بشكل عشوائي، ويمكن فتح عدة نافذات، كما أن قيمة العودة returnValue لا يمكنها العودة، دائمًا undefined. هذه المشاكل تجعلني أزعج، لذا قمت باختبار بعض المتصفحات الأحدث والأكثر شيوعًا.

المتصفح	هل يدعم	الحالة
IE9	○
Firefox13.0	○
safari5.1	○
chrome19.0	×	ليس نافذة模دالية، بل تم فتح نافذة جديدة
Opera12.0	×	لم يحدث شيء، لم يفتح أي نافذة

ماذا يفتحه Chrome بالضبط

بما أن ما تم فتحه ليس نافذة模دالية، بل مثل فتح نافذة جديدة، فما دام فقط نتحقق مما إذا كان window.opener في وحدة النافذة الفرعية فارغًا، فإننا نفهم.

<script type="text/javascript">
    alert(window.opener);
</script>

في chrome، العرض هو [object window] الكائن، بينما IE هو undefined. الآن أعلم أن chrome يعامل showModalDialog مثل window.open. أي أننا يمكننا استخدام window.opener للتحكم في وحدة النافذة الفرعية في متصفح chrome. اكتشفت أيضًا ظاهرة مثيرة للاهتمام، حيث أن اختبار window.opener في firefox لا يكون فارغًا، لذا قمت باختبار استخدام showModalDialog في وحدة النافذة الفرعية حول حالة window.opener وwindow.dialogArguments في جميع المتصفحات، حيث أن متصفح Opera لا يفتح أي نافذة، تم استبعاد اختبار هذا المتصفح.

يُشرح طريقة showModalDialog في النافذة الرئيسية حيث يتم نقل arguments كـ object window، وها هي نتائج الاختبار:

المتصفح	نافذة منبثقة	window.opener	window.dialogArguments	returnValue
IE9	○	undefined	[object Window]	○
Firefox13.0	○	[object Window]	[object Window]	○
safari5.1	○	[object Window]	[object Window]	○
chrome19.0	×	[object Window]	undefined	×

بالإضافة إلى النتائج التي حصلت عليها، مدى دعم المتصفحات المختلفة يختلف. يجب أن أقول أيضًا أن إذا تم تحديث النافذة الفرعية في متصفح Firefox، فإن window.dialogArguments سيتم فقدانه أيضًا وسيصبح undefined. من خلال النتائج التي نراها، يمكننا ملاحظة أن قيمة returnValue هي undefined فقط في متصفح chrome، بينما لا يوجد مشكلة في المتصفحات الأخرى. كيف يمكننا حل هذه المشكلة؟

حل مشكلة returnValue

من خلال جميع الاختبارات التي قمنا بها، نحن نعلم أن طريقة showModalDialog في chrome تشبه إلى حد كبير تنفيذ طريقة window.open، لذا يمكننا استخدام window.opener لتحقيق وظيفة window.returnValue.

ملاحظة: temp=Math.random() هذا المعامل العشوائي لتحديد مشكلة التخزين المؤقت، العديد من الأصدقاء قد أثبتوا أن undefined يحدث بسبب مشكلة التخزين المؤقت. تم إضافة هذا في 2012-10-17

كود js جزء من النافذة الرئيسية:

window.onload = function () {
  var returnValue = window.showModalDialog("son.html?temp=" + Math.random(), window);
  //لـ chrome
  if (returnValue == undefined) {
    returnValue = window.returnValue;
  }
  alert(returnValue);
}

كود js جزء من النافذة الفرعية:

if (window.opener != undefined) {
    //لـ chrome
    window.opener.returnValue = ";;
}
else {
    window.returnValue = "window returnValue";
}
window.close();

بهذه الطريقة، يمكن استخدامها في المتصفحات مثل IE، FireFox، Chrome، Safari، إلخ.

آخر

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

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

بيان: محتوى هذا المقال تم جمعه من الإنترنت، حقوق النشر مملوكة للمالك الأصلي، تم جمع المحتوى من قبل المستخدمين على الإنترنت بشكل متعاوني وتحميله بشكل مستقل، ويحمل هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل أي مسؤولية قانونية. إذا وجدت محتوى يشتبه في حقوق النسخ، فأنت مرحب بك في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال #بـ @) لتقديم الشكوى، وقدم الأدلة ذات الصلة، وإذا تم التحقق من ذلك، فإن هذا الموقع سيقوم بإزالة المحتوى المشبوه بسرعة.