I have read a bunch of posts but none of them seem to answer the question that i have exactly.
Is it possible to detect a tab closing that was opened by a target="_blank" attr?
I need a new tab/window to open, the user will select an option, then the tab closes.
When that tab closes i need the original window(parent or opener) to refresh.
Any ideas?
EDIT:
further explaination
i have an application that opens another application in an iframe. the application opening in the iframe connects to social media for posting a share. the new tab that opens is used for authentication/oauth dance. the page that is open in the main window shows the accounts that are connected and allows you to connect new accounts(in the main window in the iframe). the authentication/oauth opens a new window/tab to do the dance, then it closes itself. i need the parent window(main window with iframe in it) to know that the new tab/window closed so it can refresh the content and reflect the new connect.
FINAL NOTE
I use many authentication methods, so really the above is irrelavant.
I just need to find out a way to monitor the new tab/window that has opened or even have the new window/tab fire a browser event onunload to that the parent/main window knows it closing so it can refresh.
So if anyone is interested, this is how I have it working for now until I find a better solution.
First what I did was had javascript open my window by assigning it to a variable so it had a reference name.
var checkWindow = false;
var fbAuthWindow;
function openFBAuth(url) {
fbAuthWindow=window.open(url);
checkWindow = true;
setTimeout(function() { checkAuthWindow('fb'); }, 1000);
}
That also sets a timeout to run every second while checkWindow == true to check if the window is closed.
If the window is closed (my script closes the window when authentication is complete), then the page reloads ultimately setting checkWindow back to false.
function checkAuthWindow(win){
if(checkWindow == true){
if(win == 'fb'){
if(fbAuthWindow.closed){
window.location.reload();
} else {
setTimeout(function() { checkAuthWindow('fb'); }, 1000);
}
}
}
}
It isn't the prettiest or by any means a best practice to have the checking the window every second, but for now it will work until i find a better solution.
Here is the working example (http://jsfiddle.net/sureshpattu/w8x7dqxr/) and code
Html
<button class="openPopActBtn">Open pop window </button>
Javascript
var checkWindow = false;
var fbAuthWindow;
$('.openPopActBtn').click(function() {
openFBAuth('www.google.com');
});
function openFBAuth(url) {
fbAuthWindow = window.open(url);
checkWindow = true;
setTimeout(function() {
checkAuthWindow('fb');
}, 1000);
}
function checkAuthWindow(win) {
if (checkWindow == true) {
if (win == 'fb') {
if (fbAuthWindow.closed) {
window.location.reload();
} else {
setTimeout(function() {
checkAuthWindow('fb');
}, 1000);
}
}
}
}
Related
I use this function to call on my window close.
This is the confirmation box popup window.
if(confirm("Sure you want to close the window");
{
// yes return to submit function
}
else
{
// no return to Other call function
}
window.onclose = function()
{
alert('yes');
}
On Close of window on the top right corner with X symbol I need to return false. I am trying to use this window.onclose function but its not poping up.
Can anybody help me out?
Unfortunately the popup window does not have any close event that you can listen to but there is a closed property that is true when window gets closed. A solution to get around this problem is to start a timer and check the closed property of the child window every second and clear the timer when the window gets closed. Here is the code:
var win = window.open('http://www.google.com','google','width=800,height=600,status=0,toolbar=0');
var timer = setInterval(function() {
if(win.closed) {
clearInterval(timer);
alert('closed');
}
}, 1000);
There is no "close" event that you can catch with today's browsers.
There is an onbeforeunload but you can't do a lot when it is called, especially you can't prevent the window closing without the user consent and most distant operations will fail if you try them from the page which is being closed.
For a popup window, you can get the closing event, and do long operations, but only in the opener window :
var w = window.open('popup.html');
w.onbeforeunload = function(){
// set warning message
};
IMPORTANT: In recent versions of chrome, onbeforeunload only allows you to set the warning message; you may not run extra logic.
I have a button at the bottom of a form that when is pressed I would like to open up a new URL in the same window. Right now with the code I have it opens up a new window /tab. If I put ,"_self" after the url, the button breaks completely. Here is my code
$(".study-btn").click(function(){
if(questionCounter == 3)
{
window.open("http://www.google.com");
// I tried this but breaks completely
window.open("http://www.google.com", "_self");
}
else
{
window.open("http://http://www.amazon.com");
}
});
The question counter is just to me to figure out which of the form questions have been answered YES or NO.
Using this should work to open a website in a new tab in the same window:
window.open('www.google.com','_target');
If you just want to change the current page, use:
location = 'http://www.google.com';
This should work if you want to stay in the same window. window.open AFAIK usually opens a new "pop-up" window, which you don't need if you want to stay in the current window.
$(".study-btn").click(function(){
if(questionCounter == 3)
{
location.href="http://www.google.com";
}
else
{
location.href="http://http://www.amazon.com";
}
});
I use this function to call on my window close.
This is the confirmation box popup window.
if(confirm("Sure you want to close the window");
{
// yes return to submit function
}
else
{
// no return to Other call function
}
window.onclose = function()
{
alert('yes');
}
On Close of window on the top right corner with X symbol I need to return false. I am trying to use this window.onclose function but its not poping up.
Can anybody help me out?
Unfortunately the popup window does not have any close event that you can listen to but there is a closed property that is true when window gets closed. A solution to get around this problem is to start a timer and check the closed property of the child window every second and clear the timer when the window gets closed. Here is the code:
var win = window.open('http://www.google.com','google','width=800,height=600,status=0,toolbar=0');
var timer = setInterval(function() {
if(win.closed) {
clearInterval(timer);
alert('closed');
}
}, 1000);
There is no "close" event that you can catch with today's browsers.
There is an onbeforeunload but you can't do a lot when it is called, especially you can't prevent the window closing without the user consent and most distant operations will fail if you try them from the page which is being closed.
For a popup window, you can get the closing event, and do long operations, but only in the opener window :
var w = window.open('popup.html');
w.onbeforeunload = function(){
// set warning message
};
IMPORTANT: In recent versions of chrome, onbeforeunload only allows you to set the warning message; you may not run extra logic.
I call below javascript on click of link/textbox or button.
function OpenPopupLinkRisk(Number)
{
window.open("../PopUp.aspx?id=" + Number, "List", "scrollbars=no,resizable=yes,width=700,height=450");
return false;
}
I donot want user to do anything else until he closes the popup window. So how can I grey background and force user to first close the popup and then do any other activity on application.
Can anyone suggest me how to achieve this ?
Thanks !
First of all, i would really disrecommend using window.open for this unless you really need a new browser popup window. If you want to stick with it persee, then will have to use a timer or something to manually check when the window is closed like:
var popup = window.open('http://www.example.com', 'example', '');
var timer = setInterval(function() {
if(window.closed) {
clearInterval(timer);
alert('Closed alright');
}
}, 100);
Else, check some tutorials on the subject, Modal Popup
First a direct solution to you problem that I wouldn't advice using it an then an approach you should be taking and is better from usability as well as security point of view.
Check whether popup window has closed
// mask your page
mask();
// open popup
var popup = window.open("../PopUp.aspx?id=" + Number);
// check whether it's been closed
function check()
{
if (popup && !popup.closed)
{
setTimeout(check, 1000);
}
// unmask your page
unmask();
}
check();
Modern (and better) alternative
Using window.open is a bad solution because it's a security risk and popup blockers prevent sites to open new windows. It's also considered bad practice.
A much better modern alternative is to display the new page as modal window inside your page directly. This will not open new windows and users stay as they are.
There are tons of javascript plugins for modal windows. Make a Google search.
The question is pretty much all in the title.
Is it possible (and how?) to open a popup with javascript and then detect when the user closes it?
I am using jquery within the project so a jquery solution would be good. Cheers!
If you have control over the contents of the pop-up, handle the window's unload event there and notify the original window via the opener property, checking first whether the opener has been closed. Note this won't always work in Opera.
window.onunload = function() {
var win = window.opener;
if (!win.closed) {
win.someFunctionToCallWhenPopUpCloses();
}
};
Since the unload event will fire whenever the user navigates away from the page in the pop-up and not just when the window is closed, you should check that the pop-up has actually closed in someFunctionToCallWhenPopUpCloses:
var popUp = window.open("popup.html", "thePopUp", "");
function someFunctionToCallWhenPopUpCloses() {
window.setTimeout(function() {
if (popUp.closed) {
alert("Pop-up definitely closed");
}
}, 1);
}
If you don't have control over the contents of the pop-up, or if one of your target browsers does not support the unload event, you're reduced to some kind of polling solution in the main window. Adjust interval to suit.
var win = window.open("popup.html", "thePopUp", "");
var pollTimer = window.setInterval(function() {
if (win.closed !== false) { // !== is required for compatibility with Opera
window.clearInterval(pollTimer);
someFunctionToCallWhenPopUpCloses();
}
}, 200);
There is a very simple solution to your problem.
First make a new object which will open up a pop like this :
var winObj = window.open('http://www.google.com','google','width=800,height=600,status=0,toolbar=0');
In order to know when this popup window is closed, you just have to keep checking this with a loop like the following :
var loop = setInterval(function() {
if(winObj.closed) {
clearInterval(loop);
alert('closed');
}
}, 1000);
Now you can replace alert with any javascript code you want.
Have Fun! :)
Try looking into the unload and beforeunload window events. Monitoring these should give you an opportunity to call back when the DOM unloads when the window is closed via something like this:
var newWin = window.open('/some/url');
newWin.onunload = function(){
// DOM unloaded, so the window is likely closed.
}
If you can use the jQuery UI Dialog, it actually has a close event.
To open a new window call:
var wnd = window.open("file.html", "youruniqueid", "width=400, height=300");
If you just want to know when that window is going to close, use onunload.
wnd.onunload = function(){
// do something
};
If you want a confirmation from the user before the can close it, use onbeforeunload.
wnd.onbeforeunload = function(){
return "are you sure?";
};
We do this in one of my projects at work.
The trick is to have a JS function in your parent page that you plan to call when the popup is closed, then hook the unload event in the popup.
The window.opener property refers to the page that spawned this popup.
For example, if I wrote a function named callingPageFunction on my original page, I would call it from the popup like this:
$(window).unload(function() {
window.opener.callingPageFunction()
});
Two notes:
This should be wrapped in a ready function.
I have an anonymous function because you may want other logic in there
I thinks best way is:
const popup = this.window.open(url.toString());
popup.addEventListener('unload', ()=> console.log('closed'))
Yes, handle the onbeforeUnload event for the popup window and then call a function on the parent window using:
window.opener.myFunction()
This worked for me.
onunload event will be triggered whenever DOM is unloaded for example if url is changed and previous page DOM is unloaded and DOM for new page is loaded.
var newWin = window.open('/some/url',"Example");
newWin.onunload = function(){
if(newWin.closed){
// DOM unloaded and Window Closed.Do what ever you want to do here
}
}