Forum Moderators: open
So, I open a popup like so:
function OpenDetailsPopup(){return window.open('details.html','details_popup','width=554,height=400,resizable=1,scrollbars=1,toolbar=0,location=0,status=0,menubar=0')}The problem is that I need to immediately start affecting the contents via DOM access (getElementById('innerDiv').innerHTML).
The elements don't seem ready. It's only the second time, when the popup is already up and going, that I can access the contents.
Is there some kind of initialization function I'm missing?
I know this is a lame newbie question, and I have done a great deal of direct DOM stuff and whatnot, but I have always avoided using popups. I am heartbroken that I need to use them for this, but IE 5-6 will not let me use a fixed <div> with a high z-index.
This seems to be a nasty problem; at least in FF 2, which I'm using to test this fix.
Here's a very simple version of the code (I deliberately took out all the DOCTYPE and meta stuff):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
var g_winpopup = null;
function OpenTestPopup(){
if(!g_winpopup){
g_winpopup = window.open('test2.html','test_popup','resizable=1,scrollbars=1,directories=0,toolbar=0,location=0,status=0,menubar=0,width=554,height=400');
}
g_winpopup.focus();
g_winpopup.document.getElementById('putstuffhere').innerHTML= "This was added after the window opened.";
}
</script>
</head>
<body>
<div>
<form id="test" action="#" method="get" onsubmit="OpenTestPopup();return false">
<div id="form_container">
<input id="spitune" type="button" value="Spit Out a New Winder" onclick="OpenTestPopup()" />
</div>
</form>
</div>
</body>
</html>
Here is the source of "test2.html", which is loaded into the new window to create a structure to populate:
<html>
<head><title>Popped Up</title></head>
<body><div id="putstuffhere"></div></body>
</html>
Now, to demonstrate the problem, run the main file (I call it "test.html"). Bang on the button. It will create a new popup winder. If you have any kind of script debugger, it will register an error here. That error will be something to the effect of 'g_winpopup.document.getElementById("putstuffhere") has no properties'.
However, go back to the main winder, and bang on the button again.
This time, it works.
It looks like the DOM structure is not initialized immediately after a window is opened. I can't find any discussion of this.
So far, the only treatment I can see is a horrible, horrible kludge, in which I construct the "seed" in PHP before opening the window.
How can I get the DOM structure initialized as soon as the window is opened? I can't see any discussion of this.
[UPDATE]This also happens in IE6, but the error is very whacky (The callee...).
Your fix may work most or maybe even all of the time, but it might not be 100%, try this method:
var g_winpopup;function OpenTestPopup() {
if(!g_winpopup)
g_winpopup = window.open............g_winpopup.focus();
checkPopupInit();
}function checkPopupInit() {
var init = 0;// Important that these IF's are nested, not &&ed
if( g_winpopup)
if( g_winpopup.document)
if( g_winpopup.document.getElementById( "putstuffhere"))
init = 1;// If no DOM yet, come back in 100ms
if(!init) setTimeout( "checkPopupInit();", 100);
else doThings();
}function doThings() {
// By now DOM and DIV exists
var div = g_winpopup.document.getElementById( "putstuffhere");div.innerHTML = "This was added after the window opened.";
}
It's a little more longwinded but I've had to use this in the past.
Yeah, I noticed that it ain't working so well in IE 5.01/98.
In the case of my application, I'll be specifying a different code path for JavaScript disabled. I'm writing a solution that needs to degrade well, yet can take advantage of newer tech. XSLT is helping a lot here, because I can get the server to do a lot of the heavy lifting. I'll have a sniffer in the calling context that will set parameters going into the transform to trigger the correct code path construction.
a) Actually know what it is.
b) Actually believe it can be used to do harm.
I completely disregard non-JS users from my designs.
It won't be that difficult for me to do this. The code is already in place. I just have to disable a couple of flags, which will be done automatically, since they are set via JavaScript.
To "completely disregard non-JS users from" your designs seems a little ... uninformed on your part?
I'm not saying my stuff won't work with non-JS, just won't be as good. I personally see absolutely no reason to disable it on my browser, I also believe that most other users don't as they don't know what it is. Age old question, is there a demographic?
Anyway, this is off-topic.
