innerHTML & removeChild Problems - Page Stops Loading

[snazzy]

I have a problem where using innerHTML to rewrite a DIV or removeChild
to kill a DIV that either of them, if excuted before the page is done
loading will stop the page in its tracks.

removeChild:
http://www.jsonline.com/preview/richmedia6.asp

The innerHTML rewrite acts the same way. If you click "close ad" in the
upper right corner before the page has loaded completely then the page
will stop loading and elements could be missing.

What am I missing here. I probably could load the ad at the very end of
the page, but that isn't an option right now. Looking for any
thoughts...

Thanks much,
Dennis

 

[VK]

The provided link source is too big to even open it in Notepad. Do we
suppose to spend the whole week-end by studing your code? ;-)

Please provide the minimum code to illustrate your problem (and nothing
else).

An abstract suggestion: as a common rule you cannot
remove/replace/paint etc. something that doesn't exist yet. And an
element node doesn't exists until document DOM model is ready, and DOM
model is not ready until "onload".

 

[RobG]

I have a problem where using innerHTML to rewrite a DIV or removeChild
to kill a DIV that either of them, if excuted before the page is done
loading will stop the page in its tracks.

removeChild:
http://www.jsonline.com/preview/richmedia6.asp

The innerHTML rewrite acts the same way. If you click "close ad" in the
upper right corner before the page has loaded completely then the page
will stop loading and elements could be missing.

What am I missing here. I probably could load the ad at the very end of
the page, but that isn't an option right now. Looking for any
thoughts...

Thanks much,
Dennis

What VK said. First step is to validate your document, the W3C validator
barfs and can't do it:

" Sorry, I am unable to validate this document because on line
1032-1033, 1038-1039, 1167, 1968 it contained one or more bytes
that I cannot interpret as utf-8 (in other words, the bytes found
are not valid values in the specified Character Encoding). Please
check both the content of the file and the character encoding
indication."


Don't use innerHTML, use DOM. Wait for the page to fully load before
messing with its innards.

 

[snazzy]

Well there is no real way this is going to be validated, nor did I
expect anyone to sort through all the code. So I appreciate those who
responded.

I wanted to show the full working example. Just to visualize what I am
doing.

Right now a Flash ad is drawn in and call this function:

function mjsCFlash(){
var hasReqestedVersion = DetectFlashVer(requiredMajorVersion,
requiredMinorVersion, requiredRevision);
myReference = getRefToDiv("mjsSWFf");
if((hasReqestedVersion==true) && (mjsRequire()==true)){
myReference.innerHTML = '<a
href=\"http://oascentral.onwisconsin.com/R...%RAND%%/%%POS%%/%%CAMP%%/%%IMAGE%%/%%USER%%?\"><img
src=\"http://www.jsonline.com/ads/dmc/2005/tb-dmc-growingSM.gif\"
border=\"0\" alt=\"%%ALT%%\"></a>';
}
changeSize(330,80);
}

All the function calls work beautifully - the only issue is that if
this is called before the page is completely drawn then the page stops
loading. My question - is it possible to still do something similar and
get the result I need without having the page stop loading?

I only want to modify the contents of one DIV - and I don't want to
deal with a timer or ONLOAD to close the ad because the user needs to
have that ability immediately. If I did this with an IFRAME would that
make more sense? There are other ad technologies out there
closing/collapsing/rewriting DIVs - just working on my solution and
trying to find a way around this bug.

Thanks much for the replies...

 

[VK]

You definitely *can* do it.

*But* if you want to insert a block of content before page finished
loading, you have to forget about the DOM: it is applicable only to a
finished document structure. You have to use write() method instead:

<!-- your page -->
....
<div id="myFlash">
<script type="text/javascript">
function hasRequestedVersion() {
// check version
}

if (hasReqestedVersion() ) {
document.write(whatever you want);
}
else {
document.write(your oopsy message);
}
</script>

<noscript>
<font color="red">JavaScript disabled: no movies for you!</font>
</noscript>
</div>
....
<!-- the rest of your page -->


Please not that while using document.write() method on the loading
phase, you *do not* open stream via document.open() nor you close it
later via document.close().
You're using document.write() *only* in this case - otherwise you can
clear already loaded content or loose the remaining part of the page.

 

[snazzy]

But with that I am unable to target a specific DIV take I want to write
to. I suppose I could set the display to none for the Flash ad when
closing it...instead of removing it or rewriting the HTML

 

[VK]

But with that I am unable to target a specific DIV take I want to write
to. I suppose I could set the display to none for the Flash ad when
closing it...instead of removing it or rewriting the HTML

Again: these are two different situations and two very different
approaches:

[1] Page is loading.
At this moment there are no divs, element collections or document tree
- all this has to be build yet. Thus you cannot address reliably any
element by using DOM methods. All you can do is to switch (temporary)
the input stream from the server to your script by using
document.write() method. As you cannot address yet a particular part of
your page, document.write statements have to be in that exact place in
your document where you want to have your content added. So your script
has to be not in the document head section as usual but in the document
body:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>

<body>
<div>
<script>
// here you're checking for Flash version
// and writing the needed FlashMovie tags
</script>
</div>
</body>
</html>

[2] Page is loaded
This rather proprietary moment marked by firing 'load' event and
captured by window.onload event handler.

I say "proprietary moment" because 'load' event doesn't mean that every
single byte constituing the page content is received: some large
picture of a movie may still be loading for another minute (or an hour)
after that. So different browsers treat "load" moment a bit
differently. But all of them share the same behavior: immediately upon
"load" event being fired two very important changes are happening:
1) You can address any part of your document by using DOM methods
(getElementById etc.)
2) document.write method now doesn't add content to the page anymore
but *replaces* the current page with the document.write() output.

Taking into account these specifics and your original demand (preset
FlashMovie *during* the page load) I gave you the only doable solution
- see my previous post.