DOM Created Elements / Cross Frame Scripting Problem. Firefox

N

NoCopy na

Using the following example:

domiframetest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>DOM Iframe Test</title>
<script type="text/javascript">
function createIframe(){
var Iframe = document.createElement('iframe');
Iframe.id = 'DOMIframe';
Iframe.name = 'DOMIframe';
Iframe.src = 'functiontest.html';
Iframe.style.height = '60px';
Iframe.style.width = '200px';
Iframe.style.border = '1px solid #ff0000';
document.body.appendChild(Iframe);
}
function destroyIframe(){
document.body.removeChild(document.getElementById('DOMIframe'));
}

function testIframeFunction(){
window.frames['DOMIframe'].doAlert();
}

</script>
</head>

<body>
<input name="Create Iframe" type="button" value="Create Iframe"
onclick="createIframe(); return false" /> <input name="Destroy Iframe"
type="button" value="Destroy Iframe" onclick="destroyIframe(); return
false" /> <input name="Test Iframe Function" type="button" value="Test
Iframe Function" onclick="testIframeFunction(); return false" /><br />
</body>
</html>
[/code]

functiontest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Function Test</title>
<script type="text/javascript">
function doAlert(){
alert('Function Successful');
}
</script>
</head>

<body>
<p>Function Test</p>
</body>
</html>

I seem to be having a strange problem regarding a DOM created IFRAME
and cross frame scripting.

If I create an IFRAME with DOM and then try and access a function
within the IFRAME everything works as expected. The IFRAME's doAlert()
function fires, everyone is happy.

However, if I then remove the IFRAME element and recreate it, The
IFRAME's doAlert() function DOES NOT fire producing the error
"window.frames.DOMIframe.doAlert is not a function" and everyone is sad
:(

The really strange part is that I can initially create and remove the
IFRAME as many times as I want and the doAlert() function still fires.
As soon as I access the doAlert() function for the first time removing
/ recreating the IFRAME element will break the script.

Everything works as expected in IE, as long as the IFRAME is there, the
doAlert() function fires.

Using the same name / id for the IFRAME should be valid as my intention
is to only have one element created at a time. The Firefox DOM
inspector reports that the node is getting removed properly from the
DOM tree (so I am clearly not overlapping id's).

Which leads me to ???, my only guess is that my frame call is wrong
"window.frames['DOMIframe'].doAlert();" (I have tried numerous other
cross frame calls though) or Firefox has a bug that breaks that call
when your creating / removing DOM elements on the fly.

Any help would be appreciated.
 
V

VK

Using the same name / id for the IFRAME should be valid
But it's not, never was and really *is* your problem.
Simply comment out
Iframe.name = 'DOMIframe'; and it will start work.
as my intention is to only have one element created at a time.
Click to expand...
You real intention is to somehow address an element later, this is why
on gives ID's or NAME's on the first place. Look at the mess you're
doing :) You're using DOMIframe­ as id reference in one line, and as
a name reference just a couple of lines below. IE is *very* tolerant,
up to the point it can barely understand your real intentions. FF is
not.
 
N

NoCopy na

VK said:
But it's not, never was and really *is* your problem.
Click to expand...

You actually missed my meaning here as I was trying to say that
re-using the same id would be valid because I would only have one
iframe element on the screen at the time.

However you seem to be indicating that having the same "value" for both
name and ID is technically invalid. Nothing in the W3 Standards for
both the DOM and XHTML states that you can not have the same
"value" for a name and id attribute. It only RECOMMENDS that you do
not use the same name and id for the <a> tag for obvious reasons. Any
element with the same name / id pair will validate fine in any W3
validator.

Additionally, if that were the case, I could simply change my code to:

Iframe.id = 'DOMIframe';
Iframe.name = 'DOMIframeName';

And everything should work fine, which it doesn't.
Simply comment out
Iframe.name = 'DOMIframe'; and it will start work.
Click to expand...

Commenting out the "Iframe.name = 'DOMIframe';" line does nothing but
break the "window.frames['DOMIframe']" call which is based off the name
attribute.
You real intention is to somehow address an element later, this is why
on gives ID's or NAME's on the first place. Look at the mess you're
doing :) You're using DOMIframe­ as id reference in one line, and as
a name reference just a couple of lines below. IE is *very* tolerant,
up to the point it can barely understand your real intentions. FF is
not.
Click to expand...

Again, there is nothing in the W3 standards that states I can not
reference an element by ID then reference it by NAME, or vise-versa, or
any combination thereof. This is a perfectly valid practice, just not
an ideal one. My choice to use window.frames['DOMIframe'] was simply
one based on browser compatibility, all the current major browsers
support it. I had tried document.getElementById("DOMIframe").function()
but that was a no go because it's not referencing the document inside
of it, which is why I posted here for suggestions.

Additionally, if it was simply a tolerance issue for Firefox, then it
wouldn't work the first time, which is does. It only breaks after you
remove an element and recreate it. You would know that if you tested my
code before you replied (and you would have known your solution
doesn't work either).

Turns out I was very close to my solution, I only had to add
..contentWindow to the end of document.getElementById("DOMIframe") to
reference the document inside of it. Unfortunately this method is not
100% compatible with Opera or Safari but I found a work around here:
http://xkr.us/articles/dom/iframe-document/

So the end result for Firefox is
document.getElementById("DOMIframe").contentWindow.myFunction(); and I
eliminate the "mess" as you call it.

Thanks for the reply though, even if it was invalid.
 
V

VK

Commenting out the "Iframe.name = 'DOMIframe';" line does nothing

I'm sorry, I have forgotten to mention that I also changed the frame
addressing to the right one. So I did two changes in your original
code:

1) comment out
// Iframe.name = 'DOMIframe';

2) change
window.frames['DOMIframe'].doA­lert();
to
window.frames[0].doA­lert();

After that it worked as a charme on FF 1.4, no matter how many times I
added/removed/added iframe (calling doAlert() after each cicle).

I guess we can talk about an over-sensivity in FF though. It should(?)
let users go with a little stuff like that.
 
N

NoCopy na

Ahh. Thanks for the heads up on that window.frames[0] call, that is a
much nicer solution as it appears that it also supported in all the
current major browsers.

So I guess my next question would be, is it possible (and reliable) to
get the number of the frame without going through a loop to find the
correct id?

I am just looking to reduce runtime overhead but in the case of frames
I certainly don't plan on having many on a page so I guess a
window.frames.length loop doesn't seem too outrageous. Still, it would
be nice to have an ID shortcut.
Commenting out the "Iframe.name = 'DOMIframe';" line does nothing
Click to expand...

I'm sorry, I have forgotten to mention that I also changed the frame
addressing to the right one. So I did two changes in your original
code:

1) comment out
// Iframe.name = 'DOMIframe';

2) change
window.frames['DOMIframe'].doA­lert();
to
window.frames[0].doA­lert();

After that it worked as a charme on FF 1.4, no matter how many times I
added/removed/added iframe (calling doAlert() after each cicle).

I guess we can talk about an over-sensivity in FF though. It should(?)
let users go with a little stuff like that.
Click to expand...
 
V

VK

Still, it would be nice to have an ID shortcut.

It should, and you could file an "instability bug" to Mozilla
(bugzilla.mozilla.org). But I'm affraid that it doesn't help too much
on your *current* project. The root problem is that IFRAME's hierarhy
is not well defined, as it appeared as a rather new extension of
WINDOW. I'm sorry for being too lazy to type in all underground issues,
but if you really want to know them, I can answer it within a week or
so (summer, man ;-)
Actually it's a remote - but direct - issue of <FAQENTRY> tread
question you may see now in this group (where I'm almost bit down by
the best selected people of comp.lang.javascript :-(

I would stay on the loop for now (unless 50-100 ms time gain is
important in your project).
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascript DOM 1
cross frame scripting 2
Is it possible an iframe can overlapp another? 3
How do I hide the modal after 5 seconds? 4
IE shows false and Firefox shows true 3
DOM help 8
Problem applying HTML 4.01 DOM in scripting 27
Help with code 0

Members online

Total: 47 (members: 2, guests: 45)
Robots: 469

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top