IFRAME initalization and stylesheet in DOM-created IFRAME

  • Thread starter Vincent van Beveren
  • Start date
V

Vincent van Beveren

Hi everyone

I have a JavaScript app that creates an IFRAME through DOM
(createElement('IFRAME')) However, that IFRAME does not have any content
yet.

alert(iframe.contentWindow.document.documentElement)

gives null.

How can I, through DOM, create the root element? I can't find it.

My following question: In that IFRAME I need to load a stylesheet.
However, I can't seem to get the LINK in IFRAME thing working. I tried,
but IE 6 just seems to ignore the stylesheet speicified in the LINK. I
have the following code, in which win is the window of the IFRAME
(iframe.contentWindow).

eLink = win.document.createElement("LINK");
eLink.setAttribute("REL","stylesheet");
eLink.setAttribute("HREF", GUIstyleSheet);
eLink.setAttribute("TYPE","text/css");
win.document.documentElement.appendChild(eLink);

But this:

win.document.open();
win.document.writeln("<HTML><HEAD>");
win.document.writeln("<LINK REL=\"stylesheet\"
HREF=\""+GUIstyleSheet+"\" TYPE=\"text/css\">");
win.document.writeln("</HEAD><BODY></BODY></HTML>");
win.document.close();

does work? Does anyone know why? Or what I am doing wrong?

Thanks!
Vincent
 
D

DU

Vincent said:
Hi everyone

I have a JavaScript app that creates an IFRAME through DOM
(createElement('IFRAME')) However, that IFRAME does not have any content
yet.
Click to expand...

and it won't until you assign the src value.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-43933957
alert(iframe.contentWindow.document.documentElement)
Click to expand...

contentWindow refers to a window object, just as iframe. contentWindow
is not a DOM 2 attribute anyway.
gives null.

How can I, through DOM, create the root element? I can't find it.

My following question: In that IFRAME I need to load a stylesheet.
However, I can't seem to get the LINK in IFRAME thing working. I tried,
but IE 6 just seems to ignore the stylesheet speicified in the LINK. I
have the following code, in which win is the window of the IFRAME
(iframe.contentWindow).

eLink = win.document.createElement("LINK");
eLink.setAttribute("REL","stylesheet");
Click to expand...

eLink.rel = "stylesheet";
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41369587

Whenever you can, you should avoid setAttribute as a way to assign an
attribute; setAttribute does not work well in all browsers.

eLink.setAttribute("HREF", GUIstyleSheet);
Click to expand...

I assume that GUIstyleSheet is a DOMstring variable.

eLink.href = GUIstyleSheet;
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-33532588
eLink.setAttribute("TYPE","text/css");
Click to expand...

eLink.type = "text\/css";
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32498296
 
V

Vincent van Beveren

and it won't until you assign the src value.
Click to expand...

But thats weird. It must be possible to create an empty document and
fill it dynamically, right? Else I'll have to do

iframe.src='about:blank';

and thats ugly (I think).

Vincent

ps Thanks for the CSS info, that helped
 
R

Randy Webb

Vincent said:
But thats weird. It must be possible to create an empty document and
fill it dynamically, right? Else I'll have to do

iframe.src='about:blank';
Click to expand...

iframe.src = 'blank.html';

where blank.html is a valid blank page.

Then, you modify the DOM of blank.html

If you run it from a web server, and try to modify the DOM of
about:blank, you will run into security issues.
 
V

Vincent van Beveren

I have a JavaScript app that creates an IFRAME through DOM
iframe.src = 'blank.html';
Click to expand...

But thats still not very neat. I mean, its not logical to first have to
load an external html file inorder to dynamically create one? Shouldn't
something like

iframe.contentDocument = new Document(those nice W3C things);

or

iframe.createContentDocument(those nice W3C things);

work/be implemented?

Vincent
 
E

ExGuardianReader

Vincent said:
But thats still not very neat. I mean, its not logical to first have to
load an external html file inorder to dynamically create one? Shouldn't
something like

iframe.contentDocument = new Document(those nice W3C things);

or

iframe.createContentDocument(those nice W3C things);

work/be implemented?

Vincent
Click to expand...
IE thinks about:blank is a security risk when loading the main page
using https, and causes mixed mode warnings.

I've used

iframe.src = "javascript:parent.blank()"

to get around this. Where in the main window, you have a function

function blank()
{
return "<html></html>";
}

Again, it's ugly, but it works *now.*

Nige
 
J

Jim Ley

iframe.src = "javascript:parent.blank()"
Click to expand...

Recently I've had security problems with this too on cross window
iframe references in IE5.5sp2 fully patched. load a blank html doc
from your domain.

Jim.
 
D

DU

Vincent said:
But thats still not very neat. I mean, its not logical to first have to
load an external html file inorder to dynamically create one? Shouldn't
something like

iframe.contentDocument = new Document(those nice W3C things);

or

iframe.createContentDocument(those nice W3C things);

work/be implemented?

Vincent
Click to expand...

You have a good question here, I'd say. Apparently, you should be able
to do that but I have not found a single example of working code
anywhere and I tried my own and never could achieve anything despite
following thoroughly all documentations.

createDocument
http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#Level-2-Core-DOM-createDocument

E.g.:

var PopupDoctype = document.implementation.createDocumentType("",
"!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'",
"http://www.w3.org/TR/html4/strict.dtd");
var PopupDOMDocument = document.implementation.createDocument("",
"html", PopupDoctype);
PopupDOMDocument.title = "title here";
var objPopupBody = PopupDOMDocument.createElement("body");
etc..

If you can't use that (I couldn't achieve results in any browsers), then
just use an "about:blank" document and populate it dynamically. That
will work in many browsers. I have working examples on this.

There's also
createDocumentFragment
http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-35CB04B5
"DocumentFragment is a "lightweight" or "minimal" Document object."
http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-B63ED1A3

DU
 

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
Is it possible an iframe can overlapp another? 3
Iframe link overlapping text 4
iFrame and Javascript actions 5
Multi select options in a menu 1
CSS File does not really work? 1
JQuery add shadow error 4
Background image not showing up on html page 3

Members online

Total: 32 (members: 2, guests: 30)
Robots: 207

Forum statistics

Threads
473,767
Messages
2,569,570
Members
45,045
Latest member
DRCM

Latest Threads

Top