pop up window not closing after the parent window is reload - javascript

In my parent jsp page I've used:
function popUpClosed() {
window.location.reload();
}
And in child (popup window) I've used:
<script type="text/javascript">
window.onunload = function() {
if (window.opener && !window.opener.closed) {
window.opener.popUpClosed();
}
};
</script>
by this code, parent window is reloading after inserting data from popup window but popup window is not closing, I've to manually close the popup window. How can the popup window be made self close??

To close the window in your popup change the code like this:
<script type="text/javascript">
window.onunload = function() {
if (window.opener && !window.opener.closed) {
window.opener.popUpClosed();
}
window.close();
};
</script>
Refer here: How to close the current window.
onunload is called whenever your page unloads.
If you are posting data, by a submit button, you are unloading the document.
This is not the same as closing the windows.
If you want to capture only the close of the window, you should use something like:
window.onbeforeunload = windowExit;
function windowExit(){
//do somethng
//check that you are not submitting.
}

Here are two sample functions that open and close a popup window. If you create your window within a variable, you can then target the window you've opened, meaning you can close it.
<script>
function openWin()
{
myWindow=window.open("","","width=200,height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
}
function closeWin()
{
myWindow.close();
}
</script>

Related

How to detect if a Window is closed before the page hasn't been fully loaded

I'm trying to find a way to detect if a Window has been closed, but the events :
onbeforeunload and onunload are only called if the page has been completely loaded.
Basically I'm trying to simulate the behavior of a modal popup window, that is, when the popup window is open, then the main page (the opener) is frozen by overlying a transparent div and when the popup is closed, in the onunload event, that div is hidden.
My problem is the if the content of the popup takes some time to load, and the user closes the window BEFORE it has finished loading then the onunload event is never fired and thus, the transparent div remains visible.
Do you know of any way I could detect if the page is being closed even if the it hasn't finished loading.
This is my code:
In the parent (opener) window
When the link is clicked:
popUpObj = window.open(url, 'ModalPopUp', opts);
popUpObj.focus();
LoadModalDiv();
Functions to show and hide the div
This functions are implemented in the parent window:
function LoadModalDiv() {
var bcgDiv = document.getElementById("divBackground");
bcgDiv.style.display = "block";
}
function HideModalDiv() {
var bcgDiv = document.getElementById("divBackground");
bcgDiv.style.display = "none";
}
In the child window (the popup)
<script type="text/javascript">
function OnClose() {
if (window.opener != null && !window.opener.closed) {
window.opener.HideModalDiv();
}
}
function OnLoad() {
if (window.opener != null && !window.opener.closed) {
window.opener.LoadModalDiv();
}
}
window.onload = OnLoad;
window.onunload = OnClose;
</script>

retain popup window when navigating website

The following code produces a javascript popup when a page is loaded and then closes the popup window when the parent window is closed.
<script language="JavaScript">
var player;
function load() {
player = window.open('http://www.google.com','player','height=320,width=320,scrollbars,resizable');
}
function unload() {
player.close();
}
window.onload = load;
window.onunload = unload;
</script>
This is working fine, however it closes the popup window when switching pages on the site. Is there any way this can be altered to keep the popup window until the actual URL/Site window is closed?
I think you have to check the status of the parent window from the child, instead of vice-versa.
This code has not been tested, but I'm taking a stab at the concept:
window.opener.onunload =
setTimeout(
function(){
if (!window.opener) self.close();
}, 1000);
Short answer is NO, the only way to hook into the event that closes the window is onunload, which fires when the document is unloaded (like when you navigate to another page).
Maybe you could check window.opener on the popup (with a timer, or onfocus), to check if the window that originated the popup still exists, then close the popup if it doesn't.
This may help you:
<script language="Javascript">
var player;
function load() {
player = window.open('http://www.google.com','player','height=320,width=320,scrollbars,resizable');
}
function unload() {
if (!(window.location.equals('http://yourSiteName.com'))) {
player.close();
}
}
window.onload = load();
window.onunload = unload();
</script>

Is it possible to reuse a popup window in JavaScript after navigating elsewhere in the parent?

Suppose we have a website in which you click on a button, and that opens a popup (child) window using JavaScript. So let's call the parent A and the popup P. In the source of A, we'd see something like this:
<script type="text/javascript">
P = window.open('P.html', 'P');
</script>
So as long as A is open, we can interact with P in JavaScript using the P variable. However, when I click on a link in A to go to B.html, I lose all the variables. Yet my popup window is still open, so I wonder if there's any way I can link the two back together. Is there any way I can manipulate P from within B? Thanks much.
Well I figured out that, to my pleasant surprise, the answer is YES. Mohammad's solution of using window.top was not correct; when I try to access window.top from within P, that just returns a reference to P itself. RobG's answer just kind of missed the point.
I found that if I do this periodically from within P, everything works:
<!-- A.html, B.html -->
<script type="text/javascript">
function setP(ref)
{
P = ref;
}
</script>
<!-- P.html -->
<script type="text/javascript">
function updateParent()
{
if ( typeof window.opener.setP == 'function' ) {
window.opener.setP(window);
}
}
window.setInterval(updateParent, 2000);
</script>
This way, even when I navigate the parent window from A to B, B will still be updated with a window reference to P and once that's established the two windows can then communicate freely with each other again.
A window can access child windows that it opens, and child windows can access their opener window. If either of the windows navigates to a new URI in a different domain, their content is no longer accessible to the other.
e.g.
Opener window HTML:
<title>Opener window</title>
<script type="text/javascript">
var popWin = (function() {
var win;
return {
open: function() {
if (!win || win.closed) {
win = window.open('','child');
win.document.write(
'<title>Child window<\/title>' +
'<script type="text/javascript" src="popWin.js"><\/script>' +
'<h1>popWin<\/h1>'
);
}
win.document.close();
},
close: function() {
win && win.close();
win = null;
}
};
}());
</script>
<button onclick="popWin.open();">Open child</button>
popWin.js:
window.onload = function() {
var button = document.createElement('button');
button.onclick = function() {
try {
alert(window.opener.document.title);
} catch (e) {
alert('Access to opener failed with error:\n\n' + e.message);
}
};
button.appendChild(document.createTextNode('Check opener'));
document.body.appendChild(button);
};
If you open the opener document, then click on the button a child window is spawned. Clicking on the button in the child window will show the title of the opener document. Navigate the opener to a new domain then click on the button in the child window and you get an access denied error message, something like:
Permission denied to access property 'document'
if the popup is the top most window you can use window.top to access it from within B here is a link with more details window.top

Auto refresh parent window after closing popup

I am having 2 pop up screens in my (Main) jsp.
In the first pop-up the user will update the required information(Update) and after submitting the info, a new pop up will be shown that shows the modifications(View).
I would like to refresh the Main page when the user clicks on the close "X" in the view page.
I tried to use some scripts like the following in the view page, but it did not work:
<script language="JavaScript">
function refreshParent() {
window.opener.location.href = window.opener.location.href;
if (window.opener.progressWindow)
{
window.opener.progressWindow.close()
}
window.close();
}
</script>
Try putting this javascript code in your popup window:
window.onunload = function(){
window.opener.location.reload();
};
function ref_and_close()
{
opener.location.reload();
self.close();
}
//just call the function
ref_and_close();

need to refresh web page after clicking close on pop-up window

I have a pop-up window a user logs into, once they are logged in successful, I have a message that has a link to close the window. But I want it to not only close that pop up window, but I want it to refresh the webpage the pop-up window was clicked on.
So the page can refresh to see that there is a valid login session for that user.
Is this possible w/ jQuery?
In your popup window:
$('#closeButton').click(function(e) {
window.opener.location.reload(true);
window.close();
e.preventDefault();
});
Reloads the parent page and closes the popup.
You can do this:
window.location.reload()
It just tells javascript to reload the page, this is not dependent on jQuery.
onclick="javascript:window.opener.location.reload(true);self.close();"
Here is a code that refresh parent window and closes the popup in one operation.
<script language="JavaScript">
<!--
function refreshParent() {
window.opener.location.href = window.opener.location.href;
if (window.opener.progressWindow) {
window.opener.progressWindow.close()
}
window.close();
}
//-->
</script>
Use this code in ajaxlogin.js file for mvc 4 user
$('#closeButton').click(function(e) {
window.opener.location.reload(true);
window.close();
e.preventDefault();
});
Its working fine
Works efficiently for me:
$(window).unload(function() {
if (!window.opener.closed) {
window.opener.__doPostBack('', '');
e.preventDefault();
}
});
Use this code in window close event like
$('#close').click(function(e) {
window.opener.location.reload();
window.close();
self.close();
});
http://www.delhincrjob.com/blog/how-to-close-popup-window-and-refresh-parent-window-in-jquery/

Categories