I opened a popup window by window.open in JavaScript, I want to refresh parent page when I close this popup window.(onclose event?) how can I do that?
window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
You can access parent window using 'window.opener', so, write something like the following in the child window:
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>
The pop-up window does not have any close event that you can listen to.
On the other hand, there is a closed property that is set to true when the window gets closed.
You can set a timer to check that closed property and do it like this:
var win = window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no");
var timer = setInterval(function() {
if(win.closed) {
clearInterval(timer);
alert('closed');
}
}, 1000);
See this working Fiddle example!
on your child page, put these:
<script type="text/javascript">
function refreshAndClose() {
window.opener.location.reload(true);
window.close();
}
</script>
and
<body onbeforeunload="refreshAndClose();">
but as a good UI design, you should use a Close button because it's more user friendly. see code below.
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
window.opener.location.reload(true);
window.close();
});
});
</script>
<input type='button' id='btn' value='Close' />
I use this:
<script language='javascript'>
var t;
function doLoad() {
t = setTimeout("window.close()",1000);
}
</script>
<script type="text/javascript">
function refreshAndClose() {
window.opener.location.reload(true);
window.close();
}
</script>
<body onbeforeunload="refreshAndClose();" onLoad='doLoad()''>
when the window closes it then refreshes the parent window.
window.open will return a reference to the newly created window, provided the URL opened complies with Same Origin Policy.
This should work:
function windowClose() {
window.location.reload();
}
var foo = window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
foo.onbeforeunload= windowClose;
In my case I opened a pop up window on click on linkbutton in parent page.
To refresh parent on closing child using
window.opener.location.reload();
in child window caused re open the child window (Might be because of View State I guess. Correct me If I m wrong).
So I decided not to reload page in parent and load the the page again assigning same url to it.
To avoid popup opening again after closing pop up window this might help,
window.onunload = function(){
window.opener.location = window.opener.location;};
If your app runs on an HTML5 enabled browser. You can use postMessage. The example given there is quite similar to yours.
Try this
self.opener.location.reload();
Open the parent of a current window and reload the location.
You can reach main page with parent command (parent is the window) after the step you can make everything...
function funcx() {
var result = confirm('bla bla bla.!');
if(result)
//parent.location.assign("http://localhost:58250/Ekocc/" + document.getElementById('hdnLink').value + "");
parent.location.assign("http://blabla.com/" + document.getElementById('hdnLink').value + "");
}
You can use the below code in the parent page.
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>
Following code will manage to refresh parent window post close :
function ManageQB_PopUp() {
$(document).ready(function () {
window.close();
});
window.onunload = function () {
var win = window.opener;
if (!win.closed) {
window.opener.location.reload();
}
};
}
Related
HI I have some troubles when reading the text inside a window that I open with window.open() I hope you guys can help me, what I need is my parent window will read the <div> html value of my child window that the parent window called,
I have this code but It doesn't works
Parent Window
<button onclick="buttonset()">Click me</button>
<script>
var myWindow ;
function buttonset () {
myWindow = window.open("pag1.html", "myWindow", "width=200,height=100");
//myWindow.document.write("<div id='hola'>This is 'myWindow'</div>");
alert(myWindow.document.getElementById("result").innerHTML);
myWindow.close();
}
</script>
And this is my Child Window (pag1.html) code
<body>
<div id="result">1</div>
<div id="msj">Correcto</div>
</body>
and when I run it says and just open new window but it doesn't show the message
Cannot read property 'innerHTML' of null
window.open() is asynchronous, you need to wait for the document to load.
function buttonset () {
var myWindow = window.open("pag1.html", "myWindow", "width=200,height=100");
myWindow.onload = function() {
alert(myWindow.document.getElementById("result").innerHTML);
myWindow.close();
};
}
Use load event of opened window
myWindow.onload = function() {
// do stuff
}
The page is still loading. So you can attach an inline onload function on the body tag of pag1.html
pag1.html
<body onload='doIt()'>
<div id="result">1</div>
<div id="msj">Correcto</div>
<script>
function doIt() {
alert(document.getElementById("result").innerHTML);
}
</script>
</body>
I've spent more than 5 hours on this, I'm trying to load a link on a popup window and after loading I want to print it.
so what I did is the following
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function printer(){
var link = 'file:///C:\\page0339.swf';
w = window.open(link, "_blank", "location=1,scrollbars=1,menuBar=1,width=600, height=400");
w.onload = function() {
this.print();
this.close();
};
}
$(document).ready(function () {
$("#print").click(function () {
printer();
});
});
</script>
<input type ="button" id = "print" value = 'print' />
inside onload I've tried alert message and it shows up but both this.print();this.close(); are never called, and I didn't see any javascript error.
so How I can call print function inside onload??
Seems like attaching an onload after already opening the window is the wrong way to go. Instead of
w.onload = function() {
this.print();
this.close();
};
Have you tried this?
w.print();
w.close();
i am with stuck an unorthodox requirement, i have opened a window on page load using jquery like this
$(document).ready(function() {
loadLifeCare();
});
and the function goes like this
function loadLifeCare()
{
window.open('/abc/abc/abc','','width=100,height=100');
}
now this function loads a url in the new window which creates a session for the user on different
domain.
i just need to know if it is either possible to close this window after few seconds or change the href and reload it to a different link,
and i can't code on the child window.
This will open the window and then close it after 10 seconds...
function loadLifeCare()
{
var wnd = window.open('/abc/abc/abc','','width=100,height=100');
setTimeout(function() {
wnd.close();
}, 10000);
}
If you want to redirect it elsewhere, you can do this...
function loadLifeCare()
{
var wnd = window.open('/abc/abc/abc','','width=100,height=100');
setTimeout(function() {
wnd.location.href = "http://wherever.com";
}, 10000);
}
How can i call iframe function in parent window, i did something like below but not seems working in firefox. Same code working perfectly in chrome.
window.frames["original_preview_iframe"].window.exportAndView(img_id);
i think you have to use
document.getElementById('target_Frame').contentWindow.callingtargetFunction();
otherwise use this url describes solution for your problem
Invoking JavaScript code in an iframe from the parent page
Try to not type window after you 'selected' the iframe:
window.frames["original_preview_iframe"].exportAndView(img_id);
Would suggest this https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Clear wiki example that worked for me:
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello B', 'http://example.com/');
And then in the iframe:
function receiver(event) {
if (event.origin == 'http://example.net') {
if (event.data == 'Hello B') {
event.source.postMessage('Hello A, how are you?', event.origin);
}
else {
alert(event.data);
}
}
}
window.addEventListener('message', receiver, false);
(https://en.wikipedia.org/wiki/Web_Messaging.)
There are several ways to call the iframe function.
We assume you iframe id is original_preview_iframe
Way 1
You can use document.getElementById("original_preview_iframe").contentWindow.exportAndView() to trigger.
Way 2
Use window.frames.
window.frames is an array, you can set the iframe name with window.name="this is iframe test" in "test.html"
Then you can iterator the array, and compare the name, then trigger it.
for (let i = 0; i < window.frames.length; i++) {
if (window.frames[i].name === "this is iframe test") {
window.frames[i].exportAndView()
}
}
Way 3
Use postMessage.
In the way1 and way2, you need to assign function in the window object.
<body>
<script>
// this one
window.exportAndView = function(){}
// or this one
function exportAndView(){}
</script>
</body>
In the Way3, you can hide the exportAndView then you also can trigger it.
Here is an example.
// a.html
<html>
<body>
<iframe id="original_preview_iframe" src="/b.html">
</iframe>
<script>
// let postMessage trigger after b.html load
setTimeout(function(){
document.getElementById("original_preview_iframe").contentWindow.postMessage({data: "hi"});
}, 500)
</script>
</body>
</html>
// b.html (iframe html)
<html>
<body>
<script>
(function() {
function exportAndView() {
console.log("test");
}
window.addEventListener("message", (event) => {
exportAndView()
})
})()
</script>
</body>
</html>
Then in a.html, you can try use the way1 or way2, like document.getElementById("original_preview_iframe").contentWindow.exportAndView().
exportAndView will not be called becuase the scope problem.
I am calling the javascript window.open() function to load another url in a pop up. Once the users is finished it takes them to the last page that has a link that says close window that calls the window.close() function. Now when that page closes I need to update something in the original page that opened the window. Is there any way to do this? I have to call a function that is in my original page.
You can somehow try this:
Spawned window:
window.onunload = function (e) {
opener.somefunction(); //or
opener.document.getElementById('someid').innerHTML = 'update content of parent window';
};
Parent Window:
window.open('Spawn.htm','');
window.somefunction = function(){
}
You should not do this on the parent, otherwise opener.somefunction() will not work,
doing window.somefunction makes somefunction as public:
function somefunction(){
}
This is an old post, but I thought I would add another method to do this:
var win = window.open("http://www.google.com");
var winClosed = setInterval(function () {
if (win.closed) {
clearInterval(winClosed);
foo(); //Call your function here
}
}, 250);
You don't have to modify the contents or use any event handlers from the child window.
You probably want to use the 'onbeforeunload' event. It will allow you call a function in the parent window from the child immediately before the child window closes.
So probably something like this:
window.onbeforeunload = function (e) {
window.parent.functonToCallBeforeThisWindowCloses();
};
The answers as they are require you to add code to the spawned window. That is unnecessary coupling.
// In parent window
var pop = open(url);
pop.onunload = function() {
// Run your code, the popup window is unloading
// Beware though, this will also fire if the user navigates to a different
// page within thepopup. If you need to support that, you will have to play around
// with pop.closed and setTimeouts
}
I know this post is old, but I found that this really works well:
window.onunload = function() {
window.opener.location.href = window.opener.location.href;
};
The window.onunload part was the hint I found googling this page. Thanks, #jerjer!
Along with jerjer answer(top), sometimes in your parent window and child window are not both external or both internal you will see a problem of opener undefined, and you cannot access parent page properties, see window.opener is undefined on Internet Explorer
Check following link. This would be helpful too..
In Parent Window:
function OpenChildAsPopup() {
var childWindow = window.open("ChildWindow.aspx", "_blank",
"width=200px,height=350px,left=200,top=100");
childWindow.focus();
}
function ChangeBackgroudColor() {
var para = document.getElementById('samplePara');
if (para !="undefied") {
para.style.backgroundColor = '#6CDBF5';
}
}
Parent Window HTML Markup:
<div>
<p id="samplePara" style="width: 350px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p><br />
<asp:Button ID="Button1" Text="Open Child Window"
runat="server" OnClientClick="OpenChildAsPopup();"/>
</div>
In Child Window:
// This will be called when the child window is closed.
window.onunload = function (e) {
opener.ChangeBackgroudColor();
//or you can do
//var para = opener.document.getElementById('samplePara');
//if (para != "undefied") {
// para.style.backgroundColor = '#6CDBF5';
//}
};