According to the documentation (I'm only using Firefox) :
https://developer.mozilla.org/en/DOM/window.onunload
The unload event is raised when the
document is unloaded.
But my code below would trigger the alert even though the child window (i.e. variable name "win") has just been opened, not closed.
alert("failed but still reload:" + win.isSuccess);
"failed but still reload: undefined"
My attention is to invoke that onunload when the child window is closed. What am I doing wrong here??
Code
function showInsertPopup() {
var ddId = document.getElementById("workRegionDropdown");
var index = ddId.selectedIndex;
var workRegionCode = ddId.options[index].value;
if(workRegionCode != "") {
var win = window.open(machineFormPopup + "?typeFlag=1&workRegionCode=" + workRegionCode, "window1", "menubar=no, width=700, height=550, toolbar=no");
win.onunload = function() {
if(win.isSuccess) {
alert("success reload!")
getRecordByWorkRegion();
}
else {
//here gets print out somehow
alert("failed but still reload:" + win.isSuccess);
getRecordByWorkRegion();
}
}//end inner function onunload
}
}//end showInsertPopup()
Child window page has just simple js:
window.isSuccess = 1;
window.close();
You actually see the unload for the original about:blank document in the popup window first. (You can verify this by looking at the window's location.) You should then see another unload when the popup window closes.
Related
I have popup in which I need to update the data inside it in reactively. What function or event is needed to track when a popup closes?
Currently my code structure is as follows:
let BG = browser.extension.getBackgroundPage();
let timer = BG.timer;
function updatePageTime(secondsElapsed) {
const content = document.getElementById("content");
content.innerHTML = "Current Time Spent: " + timer.getTimeElapsed();
}
document.addEventListener("DOMContentLoaded", function () {
timer.subscribe(updatePageTime);
});
document.addEventListener("unload", function () {
timer.unsubscribe(updatePageTime);
});
The problem is that unload and beforeunload do not trigger on popup closes, thus I am unable to stop updates to a non-existant DOM.
Unfortunately I did not see that unload is defined on window and not document. Simply changing the document.addEventListener("unload" to window.addEventListener("unload" fixes the problem.
I have a reference to a new window opened with js
var theNewTab="";
theNewTab = window.open(theURL, 'winRef');
then I change the url in the as the user clicks on another link in the parent window using
theNewTab.location.href = targetLink;
theNewTab.focus();
The problem i'm having with chrome that id doesn't throw exception if the the window doesn't exist anymore "closed" unlink FF & IE which im using to open the window again.
try {
theNewTab.location.href = targetLink;
theNewTab.focus();
}catch(err) {
theNewTab = window.open(theURL, 'winRef');
theNewTab.focus();
}
PS: I tried to use "window.open" every time but if the window already open, id does not reload the page or it does but it doesn't re-execute the script I have in document ready I think.
I'm not sure what you need.
<script type="text/javascript">
var theNewTab = null;
function openNewTab(theURL) {
if (theNewTab == null || theNewTab.closed == true) {
theNewTab = window.open(theURL);
} else {
theNewTab.location.href = theURL;
}
theNewTab.focus();
};
// use the function when you need it
$('a').click(function() {
openNewTab($(this).attr('href'));
});
</script>
Is this example helpful for you?
I am calling a pop up window from a parent page using :
var childWindow = open('test1.aspx', '1397127848655', 'resizable=no,width=700,height=500');
I then try to set the value of two spans which are on chil pop up from parent window using this childWindow object.
childWindow.onload = function () {
alert('this msg does not shows up when run on IE8');
var hidden1 = childWindow.document.getElementById('hidden1');
var hidden2 = childWindow.document.getElementById('hidden2');
hidden1.innerHTML = rowindex;
hidden2.innerHTML = controlname;
};
this code works fine as long as I am using chrome. But it refuses to work on IE8. There are no console errors either.
I tried removing childWindow.onload = function () { } but then the page would just sort of refresh on both chrome and IE8.
UPDATE
This did not work either.
function CallPopUp(rowindex,controlname ) {
function popupLoad() {
alert('this msg does not shows up when run on IE8');
var hidden1 = childWindow.document.getElementById('hidden1');
var hidden2 = childWindow.document.getElementById('hidden2');
hidden1.innerHTML = rowindex;
hidden2.innerHTML = controlname;
}
var childWindow = open('test1.aspx', '1397127848655', 'resizable=no,width=700,height=500');
if (childWindow.document.readyState === "complete") {
popupLoad();
} else {
childWindow.onload = popupLoad;
}
If test.aspx is in the browser cache, it is possible that the onload event has already happened before you attach your event handler so you're missing it (IE is known to do this with image load events). I'd suggest you check document.readyState before attaching your event handler.
function popupLoad() {
alert('this msg does not shows up when run on IE8');
var hidden1 = childWindow.document.getElementById('hidden1');
var hidden2 = childWindow.document.getElementById('hidden2');
hidden1.innerHTML = rowindex;
hidden2.innerHTML = controlname;
}
var childWindow = open('test1.aspx', '1397127848655', 'resizable=no,width=700,height=500');
if (childWindow.document.readyState === "complete") {
popupLoad();
} else {
childWindow.onload = popupLoad;
}
As another option, you can put the values into the query parameters for the URL:
`"test1.aspx?hidden1=" + rowindex + "&hidden2=" + controlname`
and then have the popup window load it's own fields from it's own onload handler from what's in the query string. Then, you can keep the code in the popup window self contained and you don't have to try to modify one window from another.
If you don't want the user to see this or be able to edit it, you can turn off the location bar in the popup window.
I have some dojo code as below:
<script type="text/javascript">
dojo.require("dojo.io.script");
var unload = function refreshParent(){
confirmExit();
}
dojo.addOnUnload(window, "unload");
</script>
function confirmExit()
{
var r=confirm("Are you sure you want to close the window without saving it?");
if (r==true)
{
window.returnValue=true;
window.close();
}
else
{
return false;
}
}
The scenario is: On clicking on close for a window, the dojo unload gets called which closes the window.
However, I want a dialog box which asks for confirmation about the closing and if the user hits Cancel, the closing of the window should be disposed off.
However, currently, no matter what I do, the window is getting closed.
What could be the solution to this ?
You have to return the confirmExit value
var unload = function refreshParent(e){
return confirmExit();
}
Using JavaScript
i have the refresh button in my parent window,
when i click refresh button ,
i want to refresh my child window ,
window.location.href='add_billing_order_frm.php?session_re_genrate=new
This snippet redirecting the page instead refresh ,
I thing there is a snippet like
opener.document.location.reload(true);
but this one for parent window refresh, but i want for child window wiht URL location option
function show_billing_order_form(url){
var childWindow = window.open(url);
}
function refresh_my_child_window(){
return childWindow.location.reload('add_billing_order_frm.php');
}
To open a popup window(child window) , i used this show_billing_order_form call back ,
To refresh the child window , i add one refresh icon in my parent window , To refresh the child window , in that refresh icon onclick i called refresh_my_child_window ,
but function refreshing my child window..
When opening your child window from the parent, remember the return value in a variable somewhere:
var childWindow = window.open(/* ... */);
...and when you want to refresh the child:
childWindow.location.reload();
Note that some browsers will prevent access to childWindow.location.reload if the parent and child aren't loaded from the same origin.
Here's a quick-and-dirty example (live copy — note: the live copy only works in non-edit mode, like the link given, because otherwise JSBin uses null.jsbin.com instead of output.jsbin.com and so the origin doesn't match):
HTML:
<input type='button' id='btnOpen' value='Open Child'>
<input type='button' id='btnClose' value='Close Child'>
<input type='button' id='btnRefresh' value='Refresh Child'>
JavaScript:
(function() {
var childWindow;
document.getElementById('btnOpen').onclick = openChildWindow;
document.getElementById('btnClose').onclick = closeChildWindow;
document.getElementById('btnRefresh').onclick = refreshChildWindow;
function openChildWindow() {
if (childWindow) {
alert("We already have one open.");
} else {
childWindow = window.open(location.protocol + "//" + location.host + "/cotokijigu/1");
}
}
function closeChildWindow() {
if (!childWindow) {
alert("There is no child window open.");
}
else {
childWindow.close();
childWindow = undefined;
}
}
function refreshChildWindow() {
if (!childWindow) {
alert("There is no child window open.");
} else {
childWindow.location.reload();
}
}
})();
Caveat: I would never recommend hooking up event handlers with onclick properties as above. Instead, I'd use addEventListener (on standards-based browsers) or attachEvent (on IE), by using a library or a utility function like this one. Used the properties above to avoid obscuring the main point.
var childWindow = window.open("","name",/* .. */);
childWindow.location.reload();