Cannot get the innerHTML of a window.open() - javascript

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>

Related

How to close printing window

I want to close the window which has printing dialog on that using window.close() function.
I realize that, if the window does not have printing dialog, the window.close() function will works fine.
Here is the example code:
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "myWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
}
function closeWin() {
myWindow.close();
}
</script>
But if I put the print() function into the above code, I will not be albe to click the close window button until the printing dialog is closed.
Here is the example code
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "myWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
myWindow.print();
}
myWindow.print() {
myWindow.close();
}
I want to know why does that happen and how can I close the window which contains printing dialog.
Thank you.
Instead of doing mywindow.print() myWindow.close(); separately to the function, put myWindow.close() inside the function then just call that. It seems weird that you're doing myWindow.print() and closing inside of that, I dont think that'd work.

JavaScript new window with dynamic content and blank url, event listeners not called

Case 1:
var printWindow = window.open("", "print_window");
if(printWindow) {
printWindow.addEventListener('load', function(){alert(1);}, false); //Everything works but this listener is never called
printWindow.document.write(printView);
printWindow.focus();
}
Case 2:
var printWindow = window.open("<html>useless random stuff</html>", "print_window");
if(printWindow) {
printWindow.addEventListener('load', function(){alert(1);}, false); //this is hit
printWindow.focus();
}
So, dynamically loading HTML to the new window document cancels the load event listener? Or am I really messing things up somewhere?
Need help :D
You've some document context problems. Have a look up to documentation and dummy examples for window.open.
Also inspect below snippet and give attention that how alert function should be called from different window namespace.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="window_opener">Click me to load a new window</button>
<script type="text/javascript">
document.getElementById("window_opener").addEventListener('click', function(){
var badDocumentString = "<html><head><title>print window</title></head><body>I live in child window</body></html>";
var child = window.open()
childdoc = child.document
childdoc.write(badDocumentString);
childdoc.close();
child.addEventListener("load", function(){
child.alert("zeee germans"); //attention here
});
})
</script>
</body>
</html>

Printing Popup Window after loading

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();

resizeBy not working and don't know why

Why doesn't my resize button resize the window that my "create window" -button creates? I have searched and none of the answers I've found work. I'm all out of ideas now. Please help!
<div id="windowbuttons">
<button onclick="openWin()">Create window</button>
<button onclick="resizeWin()">Resize window</button>
<script>
var myWindow;
function openWin()
{
myWindow = window.open("http://www.google.com","", "width=100,height=100");
}
function resizeWin()
{
myWindow.resizeBy(250,250);
myWindow.focus();
}
</script>
</div>
And it does work correctly when I delete the url from window.open, so that it looks like
function openWin()
{
myWindow = window.open("","", "width=100,height=100");
}
What is going on?
var myWindow;
function openWin()
{
myWindow = window.open("http://localhost","", "width=100,height=100");
}
function resizeWin()
{
myWindow.resizeBy(250,250);
myWindow.focus();
}
<div id="windowbuttons">
<button onclick="openWin()">Create window</button>
<button onclick="resizeWin()">Resize window</button>
</div>
You are opening http://google.com in a new window and then you are trying to resize http://google.com from your script, which is restricted. In order to work this, your child window must reside on the same host and port as of your parent window

Open popup and refresh parent page on close popup

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();
}
};
}

Categories

Resources