How to put <script> in the "body" of a frameset document?
We usually place JavaScript <script> tags at the bottom of the HTML document immediately before the closing </body> with the advantage that they are executed after all the elements are already available in the DOM and a few more things .
However, I am using a frame 1 document that has a <frameset> instead of a <body> . I do not want to put them in the <head> document, because they will not have direct access to DOM elements below 3 . And I don't want to use an <iframe> in a standard body tag of either 4 . I tried
<head> <title>Framesets are interesting</title> </head> <frameset cols="50%,50%"> <frame id="frame-a" src="a.html"> <frame id="frame-b" src="b.html"> <script type="text/javascript"> console.log("hello world!"); console.log(document.getElementById("frame-a")); // this is what I'm after </script> </frameset> However, the script was not executed at all, it did not even appear in the DOM inspector. Undoubtedly, a <frameset> can only contain <frame> and <noframes> tags. But there is no way to get scripts to execute after the <frame> ?
Just for reference, placing them after </frameset> as is sometimes done using <body> s , also does not work.
1: Yes, I know that they are out of date. It was just natural choice 2 for my project, a neat side by side that shows two documents and scrolls them together in a complicated way.
2: ... and I have never used them before, so I wanted to try it. 3: This is what I ended up with, because the onload handler is trivial. Nevertheless, the question remains, I am curious.
4: works fine, but requires complex CSS styling
A <script> can only be displayed in a <head> or <body> element. It cannot be displayed as a child of a <frameset> ; a <frameset> can only contain <frame> elements, <noframes> elements, or other <frameset> elements. See Transitional DTD :
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- window subdivision--> Browsers can usually insert elements into other elements where they do not belong to the complete disobedience of what DTD says, because DTD is just a set of rules, but it doesn’t always happen (for example, you can never put any other stream element in an HTMLParagraphElement element no matter how you try), therefore, if the browser refuses to put the HTMLScriptElement in the HTMLFrameSetElement element, that’s probably why.
Any workarounds will include placing the <script> element in the frameset <head> element or in one of the frames. (You can also put the <script> element in the <noframes> element, since <noframes> has the same content model as <body> , but for obvious reasons this will not solve your problem.)
A similar problem was solved here: Dynamically set src frame using javascript
<head> <title>Framesets are interesting</title> <script type="text/javascript"> function LoadPage(){ console.log("hello world!"); console.log(document.getElementById("frame-a")); // this is what I'm after } </script> </head> <frameset cols="50%,50%" onload="LoadPage();"> <frame id="frame-a" src="a.html"> <frame id="frame-b" src="b.html"> </frameset> You can put a script by inserting a frame with a data URI:
<head> <title>Framesets are interesting</title> </head> <frameset cols="50%,50%"> <frame id="frame-a" src="a.html"> <frame id="frame-b" src="b.html"> <frame src="data:text/html,<script type='text/javascript'>with(parent) { console.log('hello world!'); console.log(document.getElementById('frame-a')); }</script>"> </frameset> Of course, you need to be careful with quotation marks, and the script will work in another area. You can use parent or top to access the window an external document.