Creating a popup window from main page with window.open, the child/popup page uses the onload event which should display it’s width/height. However in Chrome this will always result in 0. Checking both the window’s and document’s width/height (with or without jQuery) will only return 0. Oddly enough loading the child page in a tab by itself will always report the width/height correctly.
Is this correct behavior? Is there something wrong with the load event? With Chrome? Is there another event I can wait for to assure the width/height properties in particular are set?
If a timeout is placed in the onload you will likely get the correct values. But it seems to just be a guessing game about how long to wait before you check the width/height. Is there no way to wait for a particular event to know for sure that the width/height of the child window are set in Chrome?
Quick demo below with both pages. Hoping someone maybe has some solution, which doesn’t involve guessing at an indeterminate amount of time to put into setTimeout.
Edit: Forgot to mention, I have tested this on Chrome versions 14/15.
main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>main</title>
</head>
<body>
<input type="button" value="Pop" onclick="window.open('http://localhost:8085/social_test/test.html', 'namedWnd', 'width=320,height=240')" />
</body>
</html>
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(window).load(function(){
var report = function() {
alert($(window).width() + " x " + $(window).height());
};
report();
//window.setTimeout(report, 1000);
});
// without any jquery
/*window.onload = function() {
var report = function() {
alert(window.innerWidth + " x " + window.innerHeight);
// or document's size
//alert(window.document.documentElement.clientWidth
// + " x " + window.document.documentElement.clientHeight);
};
report();
//window.setTimeout(report, 1000);
};*/
</script>
</head>
<body/>
</html>
why don’t you use $(document) instead of $(window) : http://api.jquery.com/height/
I’ve used it in a pop app for myself, and it works, with no timeout or anything