Oynalar va freymlar

Popup oynalar va window metodlari

Popup oyna — bu asosiy sahifadan tashqarida ochiladigan yangi brauzer oynasi. Uni window.open metodi bilan ochiladi. Popup'lar internetning eng qadimgi imkoniyatlaridan biri bo'lib, ular ba'zan hozir ham foydali: masalan, autentifikatsiya (OAuth) oynalari, reklama yoki katta rasmni alohida oynada ko'rsatish uchun ishlatiladi. Ushbu darsda popup oynalarni ochish, sozlash va ular bilan ikki tomonlama ishlashni chuqur o'rganamiz.

Brauzer/oyna API'lari (window.open, window.close, focus, blur va boshqalar) — bu brauzer muhitiga tegishli. Ushbu kurs sahifasidagi interaktiv maydonchada (playground) ular ishlamaydi. Shu sababli quyidagi barcha kod bloklari faqat statik misol sifatida keltiriladi — ularni haqiqiy brauzer sahifasida sinab ko'ring.

Popup'lar haqida qisqacha tarix

Popup oynalar hamma vaqt yaxshi tavsiyaga ega bo'lmagan. Ular ko'pincha zararli saytlar tomonidan foydalanuvchini ko'plab reklama oynalari bilan bezovta qilish uchun ishlatilgan. Shu sababli deyarli barcha zamonaviy brauzerlar popup bloklovchilarga ega — ular kutilmagan popup'larni bloklaydi.

Shunga qaramay, popup'lar ba'zi holatlarda hali ham foydali. Masalan, asosiy sahifani boy interfeys bilan qoldirib, foydalanuvchini boshqa saytdagi (masalan, to'lov tizimi yoki ijtimoiy tarmoq) autentifikatsiya oynasiga yo'naltirish kerak bo'lganda popup qulaydir. Bunda asosiy oyna o'z holicha qoladi, popup esa alohida ochiladi.

Popup'ni bloklash

Ko'p brauzerlar popup'ni foydalanuvchidan tashqarida ochilishini bloklaydi. G'oya oddiy: agar popup foydalanuvchi o'zi chaqirgan hodisa (masalan, onclick) natijasida ochilsa — u bloklanmaydi. Ammo popup'ni setTimeout ichida yoki sahifa yuklanishi bilan darhol ochishga urinsangiz — u bloklanadi.

Masalan, quyidagi kod ishlaydi, chunki popup onclick ichida — foydalanuvchi bosishiga javoban ochiladi:

// Bu ishlaydi: bosish (onclick) hodisasi ichida
button.onclick = () => {
  window.open('https://javascript.info');
};

Quyidagi kod esa ko'pincha bloklanadi, chunki popup foydalanuvchi bilan bevosita bog'liq bo'lmagan holatda (kechikish bilan) ochilmoqda:

// Bu ko'pincha bloklanadi:
// popup foydalanuvchi bosishiga darhol javob bermaydi
setTimeout(() => {
  window.open('https://javascript.info');
}, 2000);
Aniq qoida brauzerdan brauzerga farq qiladi. Masalan, Firefox setTimeoutdagi popup'ni ba'zi hollarda ruxsat berishi, boshqalari esa umuman bloklashi mumkin. Umumiy tavsiya: popup'ni doim foydalanuvchi harakati (bosish) natijasida oching.

window.open sintaksisi

Popup'ni ochishning asosiy metodi — window.open(url, name, params):

Eng oddiy chaqiruv — faqat URL bilan:

// eng oddiy popup
window.open('https://javascript.info');

Agar ikkinchi va uchinchi argumentlar berilmasa, brauzer standart yangi oyna (yoki ko'pincha yangi tab/vkladka) ochadi.

Oyna sozlamalari (params)

Uchinchi argument params — bu satr bo'lib, yangi oynaning konfiguratsiyasini belgilaydi. Sozlamalar vergul bilan ajratiladi, ular orasida probel bo'lmasligi kerak. Eng muhim sozlamalar:

Masalan, 600x300 o'lchamdagi oynani ekranning markaziga yaqin joyda ochamiz:

let params = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=600,height=300,left=100,top=100';

window.open('https://javascript.info', 'test', params);

Oynani ekran markazida ochish uchun screen obyektidan foydalanib koordinatalarni hisoblash mumkin:

// oyna o'lchami
let width = 600;
let height = 300;

// ekran markazida joylashish uchun koordinatalar
let left = (screen.width - width) / 2;
let top = (screen.height - height) / 2;

let params = `width=${width},height=${height},left=${left},top=${top}`;
// diqqat: bu yerda backtick o'rniga oddiy string ham ishlatsa bo'ladi
window.open('https://javascript.info', 'test', params);
Sozlamalar bilan bog'liq muhim qoida: agar paramsda hech qanday oyna xususiyati (width/height va h.k.) ko'rsatilmasa, ular standart qiymatda qoladi. Ammo kamida bitta xususiyat ko'rsatilsa, ko'rsatilmagan boshqa panellar (toolbar, menubar va h.k.) ko'pincha no deb hisoblanadi. Shuning uchun kerakli panellarni ochiq qoldirmoqchi bo'lsangiz, ularni ochiqcha yes qiling.

Ochilgan oynaga murojaat qilish

open chaqiruvi yangi oynaga havolani (window obyektini) qaytaradi. Bu havola orqali ochilgan oynani boshqarish, uning tarkibini o'zgartirish yoki hodisalarni kuzatish mumkin:

let newWindow = window.open('about:blank', 'hello', 'width=200,height=200');

newWindow.document.write('Salom, dunyo!');

Bu yerda newWindow — yangi oynaning window obyekti. Biz uning documentiga yozdik. Lekin bu faqat bir xil manba (Same Origin) bo'lganda ishlaydi — ya'ni ikkala oyna ham bir xil protokol, domen va portga ega bo'lganda. Agar oyna boshqa saytdan bo'lsa, xavfsizlik siyosati tufayli uning ichiga kira olmaymiz (bu haqda keyingi darsda batafsil).

Boshqa manbadan (origin) yuklangan oynaning tarkibiga kirishga urinish xatolik beradi. Masalan, window.open('https://google.com') qaytargan oynaning documentiga yoza olmaysiz — bu Same Origin siyosati tomonidan taqiqlangan.

Popup'dan asosiy oynaga kirish: window.opener

Popup asosiy (uni ochgan) oynaga window.opener orqali murojaat qila oladi. Boshqa barcha oynalar uchun opener qiymati null bo'ladi.

// asosiy oynada
let newWin = window.open('our.html', 'hello', 'width=300,height=300');

// popup ichida (our.html):
// window.opener — bu bizni ochgan asosiy oyna
// window.opener.document.title — asosiy sahifa sarlavhasi

Shunday qilib, asosiy oyna va popup o'rtasida ikki tomonlama aloqa mavjud: asosiy oyna popup'ga newWin orqali, popup esa asosiy oynaga window.opener orqali murojaat qiladi. Bu — faqat Same Origin bo'lganda to'liq ishlaydi.

Oynani yopish: close va closed

Oynani yopish uchun win.close() metodi ishlatiladi. Oyna yopilgan-yopilmaganini win.closed xossasi bildiradi — u true yoki false qaytaradi.

let newWindow = window.open('about:blank', 'hello', 'width=200,height=200');

newWindow.document.write('Yopilishga tayyorman...');

newWindow.close();
alert(newWindow.closed); // true
close() metodi faqat window.open orqali (yoki window.openerga ega bo'lgan holda) ochilgan oynalarda ishonchli ishlaydi. Foydalanuvchi o'zi ochgan asosiy oynani skript orqali yopishga ko'pincha ruxsat berilmaydi — bu xavfsizlik chorasi.

Popup o'zini ham yopishi mumkin: window.close(). Bu ko'pincha popup asosiy oynaga biror ma'lumot (masalan, avtorizatsiya natijasi) uzatgach ishlatiladi.

Oynaga fokus berish va olib qo'yish: focus/blur

window.focus() oynani fokusga (oldinga) chiqaradi, window.blur() esa fokusni olib qo'yadi. Nazariy jihatdan bu bilan popup'ni oldinga chiqarish yoki uni orqada qoldirish mumkin.

let newWindow = window.open('https://javascript.info', 'example', 'width=300,height=300');

// oynani oldinga chiqarish
newWindow.focus();
Amaliyotda focus va blurga brauzerlar kuchli cheklovlar qo'ygan. Ular ilgari zararli saytlar tomonidan foydalanuvchini bezovta qilish uchun ishlatilgan (masalan, oynani doim oldinga chiqarish yoki uni ataylab orqada yashirish). Shu sababli zamonaviy brauzerlarda bu metodlar ko'pincha e'tiborsiz qoldiriladi yoki faqat foydalanuvchi harakatiga javoban ishlaydi. Ularga ko'p tayanmang.

Foydali qo'llanish misoli: popup ochilganda unga fokus berish, va foydalanuvchi asosiy oynaga qaytganda popup'ni yopish yoki eslatish:

let newWindow = open('/', 'example', 'width=300,height=300');

newWindow.onload = function() {
  newWindow.focus();
};

Popup'ni to'g'ri va odob bilan ishlatish

Popup'lar foydalanuvchini bezovta qilishi mumkin, shuning uchun ularni ehtiyotkorlik bilan qo'llang. Amaliy tavsiyalar:

Zamonaviy veb-ilovalarda popup o'rniga ko'pincha modal oynalar (sahifa ichidagi <dialog> yoki maxsus div qatlamlar) ishlatiladi. Ular boshqarish osonroq va bloklanmaydi. Popup'lar esa asosan boshqa domendagi sahifa (masalan, to'lov yoki OAuth) kerak bo'lganda foydali qoladi.

Xulosa