تُتيح طريقة `window.open()` في جافاسكريبت فتح نوافذ متصفح جديدة لعرض المعلومات بشكل منفصل أو إنشاء تطبيقات قائمة بذاتها. وبينما تُفضل تصميمات الويب الحديثة غالبًا نوافذ الحوار المنبثقة (modal dialogs)، إلا أن فهم طريقة `window.open()` يبقى ذا قيمة. يُوضح هذا الدليل استخدامها، مع مراعاة أفضل الممارسات والقيود المحتملة.
فهم `window.open()`
الوظيفة الأساسية هي `window.open(URL, windowName, windowFeatures)`. يلعب كل مُعامل دورًا حاسمًا:
URL: (سلسلة نصية) عنوان الويب الذي سيتم فتحه. إن حذف هذا المُعامل يُنشئ نافذة فارغة.windowName: (سلسلة نصية) اسم لتحديد النافذة. يؤدي إعادة استخدام الاسم إلى استهداف نافذة موجودة. إن حذف هذا المُعامل يُنشئ نافذة جديدة بدون اسم في كل مرة.windowFeatures: (سلسلة نصية) ميزات مفصولة بفاصلة للتحكم في مظهر النافذة وسلوكها. تشمل الميزات الشائعة:
| الميزة | القيمة | الوصف |
|---|---|---|
width |
بكسل |
عرض النافذة بالبكسل. |
height |
بكسل |
ارتفاع النافذة بالبكسل. |
left |
بكسل |
الموضع الأفقي من الحافة اليسرى للشاشة. |
top |
بكسل |
الموضع الرأسي من الحافة العلوية للشاشة. |
toolbar |
yes/no |
إظهار/إخفاء شريط الأدوات. |
menubar |
yes/no |
إظهار/إخفاء شريط القائمة. |
location |
yes/no |
إظهار/إخفاء شريط العناوين. |
resizable |
yes/no |
السماح/منع تغيير الحجم. |
scrollbars |
yes/no |
إظهار/إخفاء أشرطة التمرير. |
أمثلة عملية
مثال 1: نافذة منبثقة بسيطة
window.open("https://www.example.com", "_blank", "width=800,height=600");
يفتح `example.com` في علامة تبويب أو نافذة جديدة.
مثال 2: نافذة منبثقة قابلة للتخصيص
let myWindow = window.open("", "myPopup", "width=400,height=300,resizable=yes,scrollbars=yes");
if (myWindow) {
myWindow.document.write("مرحباً من نافذة منبثقة!
");
myWindow.document.close();
} else {
alert("تم حظر النافذة المنبثقة!");
}
يُنشئ نافذة منبثقة مخصصة مع محتوى مُضاف ديناميكيًا. يُدرج معالجة الأخطاء لإدارة حاصرات النوافذ المنبثقة بشكل صحيح.
مثال 3: التحكم في النوافذ المنبثقة وإغلاقها
let myWindow = window.open("about:blank", "myWindow");
// ... لاحقاً في كودك ...
if (myWindow && !myWindow.closed) {
myWindow.close();
}
يُوضح هذا فتح نافذة، ثم التحقق لاحقًا مما إذا كانت مفتوحة قبل محاولة إغلاقها. يمنع التحقق `!myWindow.closed` حدوث أخطاء إذا كانت النافذة مُغلقة بالفعل.
اعتبارات هامة
- حاصرات النوافذ المنبثقة: حاصرات النوافذ المنبثقة شائعة في المتصفحات. تعامل دائمًا مع إمكانية أن تُعيد `window.open()` قيمة `null`.
- تجربة المستخدم: النوافذ المنبثقة المُفرطة مُزعجة. استخدمها باعتدال فقط عند الضرورة.
- بدائل: بالنسبة للعديد من حالات الاستخدام، تُوفر نوافذ الحوار المنبثقة أو التفاعلات الأخرى داخل الصفحة تجربة مستخدم أكثر سلاسة.