Як і чому працює напередпочатку. JavaScript - Об'єкт window: відкриття та закриття вікон Методи об'єкта window: open(), close(), print(), focus() та blur()

2

У мене є одна батьківська сторінка та дочірня сторінка. дочірня сторінка відкрита на новій вкладці

Я хочу показати одне попереджувальне повідомлення (закривається дочірня сторінка) , коли я закриваю дочірню вкладку.
Як показати закриту messgae, закриваючи вкладку? (Не освіжаючий час)

Я використовував OnUnload і onbeforeunload.
Два методи також називаються при оновленні сторінки та закритті вкладок.

Window.onunload = function doUnload(e) ( alert("Child window is closing..."); )

Window.onbeforeunload = function doUnload(e) ( alert("Child window is closing..."); )

Я повинен показати попереджувальне повідомлення тільки закрити вкладку в браузері.

Допоможіть мені. Спасибі заздалегідь.

Я використовую наступний сценарій. Його працювала у IE. Але не працював у FireFox

window.onbeforeunload = function() ( if ((window.event.clientX< 0) || (window.event.clientY < 0) || (window.event.clientX < -80)) { alert("Child window is closing..."); } };

Як досягти цього у FireFox та інший браузер.

• 4 відповіді

Сортування:

Активність

1

Для цього афаїк ніколи не був сценарієм крос-браузера. Рішення полягає в тому, щоб НЕ покладатися на недокументовані та мінливі функції конкретного браузера, щоб знайти щось важливе.

Оскільки у вас є сторінка CHILD, ви можете налаштувати тест у батька (відкривача), який з інтервалом перевіряє властивість childWindowHandle.closed та діє на це.

1

Якщо припустити, що просто намагається стріляти передпочатком Crossbrowser подія, це значною мірою робить це (за винятком опери)

Try( // http://www.opera.com/support/kb/view/827/ opera.setOverrideHistoryNavigationMode("compatible"); history.navigationMode = "compatible"; )catch(e)() //Our Where The F" Are You Going Message function ReturnMessage() ( return "WTF!!!"; ) //UnBind Function function UnBindWindow() ( window.onbeforeunload = null; return true; ) //Bind Links we dont want to affect document .getElementById("homebtn").onclick = UnBindWindow; document.getElementById("googlebtn").onclick = UnBindWindow; //Bind Exit Message Dialogue window.onbeforeunload = ReturnMessage;

0

Ви не могли б бути в змозі зробити це, крім деяких методів, заснованих печива, який є робота розвиток обхідних як не стійкі файли cookie. Друга ідентифікація оновлення сторінки, переадресації на основі форми або зворотної переадресації або закриття браузера з вивантаженням подій не є прямою та стомлюючою. Рекомендувати не залежати від цього.

Ви можете зробити деякі дрібниці, перш ніж клієнт закриє вкладку. javascript detect browser close tab/close browser , але якщо ваш список дій великий, а вкладка закривається до завершення, ви безпорадні. Ви можете спробувати, але з моїм досвідом не залежить від нього. Так, ви не можете в цей час диференціювати назад, оновити та закрити. Тому немає надійного способу сказати, чи справді дитина закрита.

Window.addEventListener("beforeunload", function (e) ( var confirmationMessage = "\o/"; /* Do you small action code here */ (e || window.event).returnValue = confirmationMessage; //Gecko + IE return confirmationMessage;//Webkit, Safari, Chrome));

«Однакпопередньо, якщо ви не збираєтеся відтворити веб-суплікований текст, тільки стандартний повідомлення», судячи з коментарів, остаточно і безповоротно. У зв'язку з цим захотілося трохи написати про історію питання.

Багатьом відомо, що завдяки тому, щопопередньо можна попросити користувача не залишати веб-сторінку у випадку, якщо у нього є незбережені дані (наприклад, написано у формі, але не надіслано повідомлення на форум). Для цього достатньо дописати приблизно такий JavaScript:
window.onbeforeunload = function (evt) ( var message = "Document "foo" is not saved. You will lost the changes if you leave the page."; if (typeof evt == "undefined") ( evt = window.event ; ) if (evt) ( evt.returnValue = message; ) return message; )
Після цього в ідеалі якщо користувач забажає залишити сторінку (будь-яким способом - закрити вкладку, весь браузер, перезавантажити сторінку, ввести нову адресу в адресний рядок, перейти по закладці і т. д.), він побачить запит підтвердження і відхід зі сторінки можна буде скасувати . Раніше несумлінні автори сайтів намагалися за допомогою цього віконця перехитрити користувача та затримати його на сторінці, наприклад, використовуючи текст «Натисніть OK, щоб продовжити роботу з сайтом та Cancel, щоб закрити» (насправді кнопки працювали навпаки). Або навіть щось страшніше, наприклад «Натисніть OK, щоб підтвердити зняття $1000 з вашої кредитної картки».

Потім браузери порозумнішали і стали дописувати допоміжний текст, що ускладнює обман користувача. Ось, наприклад, як це робить IE8:

Практично аналогічний текст був у Firefox 3:


Якщо його весь прочитати, стає зрозуміло, що повідомив сайт, а що - браузер. Однак обдурити все одно можна.

Тут ми бачимо точний опис дій прямо на кнопках. Вже дуже важко переконати користувача натиснути "Піти", щоб залишитися і "Залишитися", щоб піти. На мій погляд, рішення ідеальне і можна закрити цю тему. Взагалі, як відомо, безлике OK майже в будь-якому діалозі слід замінювати на назву дії (наприклад, "Видалити файли", "Шукати", "Додати рядок", "Відкрити файл" і т. д.), це зменшує кількість помилок користувача, навіть якщо ви повністю контролюєте текст діалогу.

У чому була драма з багом 641509? У тому, що це підтвердження Firefox 4 і вище виглядає так:


Як видно, текст користувача зник взагалі. З 4-ї версії веб-сайт не може повідомити користувача ніякого додаткового повідомлення і пояснити, чому саме він не хоче, щоб користувач йшов. Скажімо, якщо ви реалізуєте інтерфейс для роботи з багатьма документами в одному вікні, і якийсь із них не збережений, можна було б сказати, який конкретно, але в Firefox ви цього не зрозумієте. Можливо, ви його і не бажаєте зберігати і побачивши повідомлення, спокійно пішли б зі сторінки, а так ви не знаєте, в чому справа. У простирадлі

У мене вже кілька разів запитували, як можна обробити закриття вкладки. Припустимо, користувач хоче закрити Ваш сайт, а Ви робите якесь спливаюче вікно і запитуєте: " А ви впевнені?", або робите редирект на інший сайт. Зрозуміло, ці методи дуже дратують користувачів, тому рекомендую не використовувати їх. На щастя, браузери це так само дуже погано обробляють, проте деякі можливості по обробці закриття вкладки все-таки є.

Є можливість запитати у користувача: " Чи впевнений він, що хоче закрити сторінку?Ось як можна реалізувати таку обробку закриття вкладки:

window.onbeforeunload = function() (
return "Що-небудь повідомити користувача";
}

Ось такий код буде працювати в Firefox, IE, Chrome, але не буде працювати в Opera (цей браузер назавжди взагалі ніяк не обробляє). При цьому сама функція обробки може лише повертати рядок, тобто ніяких редиректів не спрацює.

Порядок, що повертається, буде виводитися у вікні підтвердження в Chrome і IE. У Firefox цей рядок ніяк не проявляє себе.

Я хочу захопити подію закриття вікна браузера / вкладки. Я спробував наступне з jQuery:

JQuery(window).bind("beforeunload", function() ( return confirm("Do you really want to close?") )))

Але він також працює з подачею форми, чого я не хочу. Я хочу подію, яка спрацьовує лише тоді, коли користувач закриває вікно.

Починаючи з jQuery 1.7, метод.live() застарів. Використовуйте.on() для приєднання обробників подій. Користувачі старіших версій jQuery повинні використовувати.delegate() у перевагу.live()

$(window).bind("beforeunload", function() ( return true || confirm("Do you really want to close?"); ));

$(window).unbind();

JQuery(window).bind("beforeunload", function (e) ( var activeElementTagName = e.target.activeElement.tagName; if (activeElementTagName != "A" && activeElementTagName != "INPUT")) ( return "Do you really want to close?";))))

Моя відповідь спрямована на надання простих тестів.

Див. Відповідь @SLaks.

$(window).on("beforeunload", function() ( return inFormOrLink ? "Do you really want to close?" : null; ))

Щоразу, коли користувач закриває сторінку (кнопка x чи CTRL + W), браузер виконує цей код перед beforeunload , але з невизначений термін. Єдиним винятком є ​​вікно підтвердження (return "Do you really want to close?"), який буде чекати на відповідь користувача.

Chrome: 2 секунди.
Firefox : ∞ (або подвійне клацання або примусове закриття)
Край : ∞ (або подвійне клацання)
Провідник 11: 0 секунд.
Safari: TODO

Що ми використали для перевірки цього:

• Сервер Node.js Express із журналом запитів
• Наступний короткий файл HTML

Те, що він робить, - надіслати якнайбільше запитів, перш ніж браузер завершить свою сторінку (синхронно).

function request() ( return $.ajax(( type: "GET", url: "http://localhost:3030/" + Date.now(), async: true )).responseText; ) window.onbeforeunload = ( ) => ( while (true) ( ​​request(); ) return null; )

Вихід Chrome:

GET /1480451321041 404 0.389 ms - 32 GET /1480451321052 404 0.219 ms - 32 ... GET /hello/1480451322998 404 0.328 ms 2 2 seconds since requests can take few milliseconds to be sent.

Спробуйте це також

Window.onbeforeunload = function () ( if (pasteEditorChange) ( var btn = confirm("Do You Want to Save the Changess?"); if(btn === true)( SavetoEdit();//your function call ) else ( windowClose();//your function call ) ) else ( windowClose();//your function call ) );

Просто перевірте...

Function wopen_close()( var w = window.open($url, "_blank", "width=600, height=400, scrollbars=no, status=no, resizable=no, screenx=0, screeny=0")); w.onunload = function()( if (window.closed) ( alert("window closed"); )else( alert("just refreshed"); ) ) )

На жаль, буде запущено перезавантаження, перенаправлення нової сторінки або закриття події браузера. Альтернативою є уловлювання ідентифікатора, що ініціює подію, і якщо це форма, не викликає жодної функції, і якщо вона не є ідентифікатором форми, то робіть те, що ви хочете зробити, коли сторінка закривається. Я не впевнений, що це також можливо прямо і втомлює.

Ви можете зробити деякі дрібниці, перш ніж клієнт закриє вкладку. javascript виявляє браузер закрити вкладку / закрити браузер, але якщо ваш список дій великий, а вкладка закривається до завершення, ви безпорадні. Ви можете спробувати, але з моїм досвідом не залежить від нього.

Window.addEventListener("beforeunload", function (e) ( var confirmationMessage = "\o/"; /* Do you small action code here */ (e || window.event).returnValue = confirmationMessage; //Gecko + IE return confirmationMessage;//Webkit, Safari, Chrome));

Якщо ваше подання форми відправляє їх на іншу сторінку (як я вважаю, це так, тобто запуск beforeunload), ви можете спробувати змінити beforeunload форми на виклик ajax. Таким чином, вони не залишать вашу сторінку при beforeunload форми, і ви можете використовувати свій beforeunload прив'язки beforeunload на свій розсуд.

Для вирішення, яке добре працювало з сторонніми елементами керування, такими як Telerik (наприклад, RadComboBox) і DevExpress, які використовують теги Anchor з різних причин, розгляньте наступний код, який є трохи покращеною версією коду desm з кращим селектором для себе прив'язка тегів прив'язки :

Var уFormOrLink; $("a:not(), a").live("click", function() ( inFormOrLink = true; )); $("form").bind("submit", function() ( inFormOrLink = true; )); $(window).bind("beforeunload", function(eventObject) ( var returnValue = undefined; if (! inFormOrLink) ( returnValue = "Do you really want to close?))"; } eventObject.returnValue = returnValue; return returnValue; });!}

Я використовував Slaks, але це не працює, як є, оскільки напередпочатку відновленняобміну аналізується як рядок, а потім відображається у вікні підтвердження браузера. Так відображається значення true, наприклад true.

Просто використовуючи зворотний зв'язок. Ось мій код

Var preventUnloadPrompt; var messageBeforeUnload = "мої message here - Чи можу ти скористатися цією page?"; //var redirectAfterPrompt = "http://www.google.co.in"; $("a").live("click", function() ( preventUnloadPrompt = true; )); $("form").live("submit", function() ( preventUnloadPrompt = true; )); $(window).bind("beforeunload", function(e) ( var rval; if(preventUnloadPrompt) ( return; ) else ( //location.replace(redirectAfterPrompt); return messageBeforeUnload; ) return rval; ))

Var validNavigation = false; jQuery(document).ready(function () ( wireUpEvents(); )); function endSession() ( // Browser or broswer tab is closed // Do sth here ... alert("bye"); ) function wireUpEvents() ( /* * For list events that triggers onbeforeunload on IE * check http http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx */ window.onbeforeunload = function () ( debugger if (!validNavigation) ( endSession(); ) ) // Attach the event keypress exclude the F5 refresh $(document).bind("keypress", function (e) ( debugger if (e.keyCode == 116) ( validNavigation = true; ) ))); // Attach the event click for all links in the page $("a").bind("click", function () ( debugger validNavigation = true; )); // Attach the event submit for all forms in the page $("form").bind( "submit", function () ( debugger validNavigation = true; )); ));) 'enter code here'

Моя проблема: подія onbeforeunload буде ініційована тільки в тому випадку, якщо була непарна кількість відправлень (кліків). У мене було поєднання рішень із подібних потоків у SO, щоб моє рішення працювало. добре, мій код говоритиме.

$(document).ready(function() ( updatefgallowPrompt(true); window.onbeforeunload = WarnUser; ) функція WarnUser() ( var allowPrompt = getfgallowPrompt(); if(allowPrompt) ( saveIndexedDataAlert(); updatefgallowPrompt(true); event.stopPropagation ) ) function saveIndexedDataAlert() ( var allowPrompt = getfgallowPrompt(); var lenIndexedDocs = parseInt($("#sortable3 > li").size()) + par#Int$ ul").size()); if(allowPrompt && $.trim(lenIndexedDocs) > 0) ( event.returnValue = "Your message"; } else { event.returnValue = " "; updatefgallowPrompt(true); } } $(document).click(function(event) { $("a").live("click", function() { updatefgallowPrompt(false); }); }); function updatefgallowPrompt (allowPrompt){ //exit msg dfds $("body").data("allowPrompt", allowPrompt); } function getfgallowPrompt(){ return $("body").data("allowPrompt"); }!}

Після працював для мене;

$(window).unload(function(event) ( if(event.clientY)< 0) { //do whatever you want when closing the window.. } });

Window.onbeforeunload = function () ( return "Do you really want to close?"; );

Можливо, просто дляпереробки події дляпереробки події submit форми:

JQuery("form").submit(function() ( jQuery(window).unbind("beforeunload"); ... ));

На цьому уроці ми познайомимося з різними методами об'єкта window, які дозволяють відкривати та закривати вікна, визначати чи закрито вікно, а також отримувати його внутрішнє ім'я та ін.

У цьому розділі ми розглянемо такі методи об'єкта window:

• open() – призначений для відкриття вікон (вкладок);
• close() – призначений для закриття вікон. В основному використовується для закриття вікон відкритих методом open();
• print() - призначений для друку вмісту вікна;
• focus() - призначений для передачі фокусу вказаного вікна;
• blur() - призначений для видалення фокусу із зазначеного вікна.

Параметри методу:

• У першому параметрі вказується URL сторінки, яку потрібно завантажити у вікно. Якщо значення цього параметра не задавати, то у вікні буде відображено пусту сторінку (about:blank).
• У другому параметрі методу Open вказується значення атрибута target або ім'я вікна. Підтримуються такі значення:
• _blank - URL завантажується у нове вікно (вкладку). Це значення використовується за умовчанням;
• _parent - URL завантажується у батьківський кадр. Якщо його немає, URL завантажується в поточне вікно (вкладку);
• _self - URL завантажується у поточне вікно;
• _top - скасовує всі кадри та завантажує URL у поточне вікно (вкладку) браузера. Якщо його немає, URL завантажується в поточне вікно (вкладку);
• Як параметр Ви також можете вказати ім'я вікна. Це ім'я є внутрішнім і може використовуватися веб-розробниками для виклику функцій та методів цього вікна.
• Третій параметр призначений для вказівки набору властивостей вікна, що вводяться через кому. Підтримуються такі основні властивості вікна:
• left , top - координати (у пікселях) верхнього лівого кута вікна браузера щодо лівого верхнього кута екрана. Значення цих властивостей мають бути позитивними чи рівними 0;
• height , width - висота та ширина робочої області вікна браузера. При вказівці значень необхідно враховувати, що ширина та висота вікна браузера не може бути меншою за 100 пікселів;
• resizable - логічна властивість вікна, яка призначена для увімкнення або вимкнення можливості зміни розмірів вікна браузера. Дана властивість приймає такі значення: yes або 1 і no або 0 ;
• scrollbars - логічне властивість вікна, яке призначене для включення або вимкнення відображення смуг прокручування вмісту вікна браузера. Дана властивість приймає такі значення: yes або 1 і no або 0 ;
• status - логічна властивість вікна, яка призначена для увімкнення або вимкнення відображення статусного рядка браузера. Ця властивість приймає такі значення: yes або 1 і no або 0 .

Розглянемо наступні приклади:

1. Відкрити порожню сторінку about:blank у новому вікні. Дане вікно повинно мати ширину та висоту, рівну 250рх:

Window.open("","","width=250,height=250");

2. Відкрити веб-сторінку "http://сайт/" у поточному вікні:

Window.open("http://сайт/", "_self");

3. Відкрити нове вікно, що має певні властивості (top=100, left=100, width=400, height=500, scrollbars=yes, resizabie=yes):

Window.open("http://сайт", "_blank", "top=100, left=100, width=400, height=500, scrollbars=yes, resizable=yes");

Метод open() дозволяє як відкрити вікно, а й отримати посилання дане вікно. Це посилання дозволяє взаємодіяти з цим вікном за допомогою виклику певних властивостей та методів. Тобто. ми можемо за допомогою JavaScript коду, розташованого в одному вікні, керувати іншим вікном.

Наприклад, щоб звернутися до об'єкта document відкритого вікна:

Відкрити порожнє нове вікно та вивести в ній певний текст:

Var myWindow = window.open("", "", "width=250, height=250"); myWindow.document.write("

Деякий текст

Примітка: Взаємодіяти Ви можете тільки з вікнами, які самі відкрили, з іншими вікнами Ви працювати не можете.

Він призначений для закриття вікна. Цей метод не має параметрів. Він зазвичай використовується для закриття вікон, створених методом open() . В іншому випадку, коли Ви спробуєте закрити вікно (вкладку), відкрите самим користувачем (не з JavaScript), то браузер через міркування безпеки запитає у користувача підтвердження виконання цієї дії.

Наприклад, створимо кнопки для відкриття та закриття вікна з ім'ям myWindow:

//створити змінну, у якій зберігатимемо посилання на об'єкт window відкритого вікна var myWindow; function myWindowOpen ( myWindow = window.open("http://www.yandex.ru", "myWindow", "width=250, height=250"); ) function myWindowClose ( if (myWindow) ( myWindow.close() myWindow = null; ) ) Відкрити вікно Закрити вікно

Він призначений для друку вмісту вікна. Цей метод не має параметрів.

function myPrint() ( window.print(); ) Друк сторінки

Він призначений для передачі фокусу вказаного вікна. Цей метод не має параметрів.

Він призначений, щоб усунути фокус із зазначеного вікна, тобто. переміщує його на задній план. Цей метод не має параметрів.

function myWindowOpen() ( var myWindow = window.open("", "", "width=200,height=100"); ) function myWindowFocus() ( myWindow.focus(); ) function myWindowBlur() ( myWindow.bl (); ) Відкрити вікно Надіслати фокус вікну Перемістити вікно на задній план

У цьому розділі розглянемо такі властивості об'єкта window:

• name – призначене для отримання або встановлення внутрішнього імені вікна;
• opener - дозволяє отримати у поточному вікні посилання на вікно (об'єкт window), з якого було відкрито дане вікно;
• closed - властивість логічного типу, яка повертає: true якщо вікно закрито і false якщо вікно відкрито.

Ця властивість дуже часто використовується для зміни внутрішнього імені вікна, після того, як воно вже відкрито. Крім того, властивість name може повернути поточне значення внутрішнього імені вікна.

Внутрішнє ім'я вікна, це не рядок, укладений між тегом, що відкриває і закриває title - це ім'я вікна, яке призначене для розробника. Тобто. це ім'я невидимо для користувача.

Це ім'я в основному використовується в гіперпосиланнях та формах для вказівки вікна, в якому потрібно відкрити сторінку. Наприклад, для вказівки внутрішнього імені вікна в гіперпосиланні використовується атрибут target , Якщо елемент а має атрибут target="searchWindow" , то при натисканні на це посилання браузер спочатку намагається знайти вікно з таким внутрішнім ім'ям (searchWindow), якщо вікна з таким внутрішнім існує, то він відкриває нове вікно і присвоює йому ім'я searchWindow . А якщо вікно з таким ім'ям існує, то нове вікно не відкривається, а перезавантажується сторінка за вказаним посиланням цього вікна. За замовчуванням вікна в браузері не мають внутрішнього імені.

Наприклад, відкриємо сторінку "http://www.google.com/" у вікні, яке має ім'я myWindow:

window.name = "myWindow";

Наприклад, відкриємо вікно за допомогою методу open() і виведемо в ньому його ім'я:

var wnd = window.open("","myTest","width=200, height=300"); wnd.document.write("

Це вікно має ім'я: "+wnd.name+".");

Ця властивість дозволяє одержати у вікні, посилання на вихідне вікно (об'єкт window), тобто. на вікно з якого було відкрито вікно.

Наприклад, у Вас є вихідне вікно (1), в якому Ви за допомогою методу ореn() відкриваєте інше вікно (2). У цьому вікні (2) можна за допомогою властивості opener отримати вікно (1).

function openMyWindow() ( var myWindow=window.open("","","width=200,height=200"); myWindow.document.write("Відкрите вікно (2)");