Frame handling

[Frame]

I'm looking for tutorials or articles considering HTML Frames and how to
handle them with Javascript.

E.g. samples how Frames can exchange information, can a Frame instruct
other Frame to update it's content etc.

This kind of information is welcome.

Cheers!

 

[Richard Cornford]

I'm looking for tutorials or articles considering HTML
Frames and how to handle them with Javascript.

E.g. samples how Frames can exchange information, can a
Frame instruct other Frame to update it's content etc.

This kind of information is welcome.

First off, be very certain that you need to be using frames at all. They
introduce a lot of issues that do not exist in single web pages, some of
which are significant to scripting such structures.

For single web page the scripting environment has a single global
object, and that global object is the 'window' object. An object that
can be referred to by the identifiers - window - and - self - (and,
because there is no frameset hierarchy, by the identifiers - parent -
and - top -, and from code executing in the global context, or from
within function not being executed as methods of objects, with the -
this - keyword).

In a frameset each page (including any pages defining a frameset) has
its own global object, which is also a 'window' object (though it would
be better referred to as a 'frame' object in that context). Thus code
executing within any page in the frameset can refer to its own
global/window/frame object using the unqualified identifiers - window -
and - self -. However, these global/window/frame objects form a
tree-like hierarchy in a frameset. The unqualified identifier - top -
refers to the top-most (or root) global/window/frame object in that
hierarchy from any frame. And the identifier - parent - refers to the
global/window/frame object that directly contains the
global/window/frame object from which the reference is made (The one
which has loaded the html page that includes the FRAME element that
loaded the page using the - parent - reference).

Global variables and function definitions become named properties of the
global object that contains the document in which they are defined (or
which imports the script files in which they are defined). This means
that if a (top-most) frameset page defines a function called -
doSomething - then code imported into one of the pages within that
frameset can call that function as:-

top.toSomething(x, y);

Similarly, if the top-most frameset page has a global variable call -
something - then a page within the frameset could, for example, assign a
value to that variable as:-

top.something = 42;

A page that is a direct child of the top-most frameset page could use:-

parent.toSomething(x, y);

- and -

parent.something = 42;

and if the top-most frameset page defines a frame that itself loaded a
frameset a page within that contained frameset could use:-

parent.parent.toSomething(x, y);

- and -

parent.parent.something = 42;

Referencing the global/window/frame objects from parent to child is done
through the - frames - collection, which has an indexed member for each
frame (including IFRAME) directly contained within a frameset page. The
members of the - frames - collection can also be referenced by name,
that is, the - frames - collection has a named member, the name of which
corresponds with the NAME attribute of the defined FRAME element. More
recent browsers also support named references within the -
frames -collection using names that correspond with the ID attribute of
FRAME elements, but to maximise support it is probably advisable to give
FRAME elements both NAME and ID attributes that have identical values
(assuming the pertinent DTD allows that, as they probably will as strict
DTDs don't accommodate FRAME elements anyway).

So a frameset page that defines a FRAME element as:-

<frame src="http://exampele.com/page.html" name="main" id="main">

- can reference the global/window/frame object that contains -
page.html - using:-

frames['main']

and if that frameset specified a second frame:-

<frame src="http://exampele.com/page2.html" name="menu" id=" menu ">

- then code within that second frame can refer to its sibling (main)
as:-

parent.frames['main']

It is important to note that the - frames - collection only contains
references to the global/window/frame objects that are direct children
of the global/window/frame object that possesses the particular -
frames - collection. Frames that are children of those contained frames
need to be referenced through their parent's - frames - collection. So,
in the above example, if - main - was itself a frameset that defined
FRAME elements with the names/IDs "mainLeft" and "mainRight" then code
in the top-most frameset page would refer to one of those two frames
as:-

frames['main'].frames['mainLeft']

(Though probably a bit more cautiously than that as there would be no
guarantee that main had loaded its HTML and so its - frames - collection
may be empty at the time when the property accessor was evaluated.)

Given that the global/window/frame objects that correspond with all of
the windows/frames defined in a frameset (or nested framesets) form a
tree-like hierarchy they can all be referenced from any locution in that
structure using appropriate combinations of - parent -, - top -, and -
frames - in the property accessors.

Richard.

 

[Bert]

I'm looking for tutorials or articles considering HTML Frames and how to
handle them with Javascript.

E.g. samples how Frames can exchange information, can a Frame instruct
other Frame to update it's content etc.

This kind of information is welcome.

Cheers!

Hi, I made a function for this that loops over all frames in the current
window and tries to execute specific code on these frames.
So when function is called it tries to execute it on all frames it can find,
if function doesn't exist, it will do nothing.
(it works on firefox and iexplore). Well I use it quite often because it is
just one line of code and everything goes cross frame. There are some
drawbacks, one of them is you must yourself manage the executable codes in
the frames to avoid unwanted execution.


you could for example call: firecode('alert(\"I am a frame\");');
And every frame shows an alert.

or firecode('changecolor();');
and every frame that has changecolor() in it will execute it. What
changecolor is is up to you
Just make a function changecolor that changes the background of some frame,
and call above code.




here is the function:



function firecode(code)
{
framestruct(window, 1, code);
}

function framestruct(el, start, func)
{
var m = 20;


if(!start)
{
if((navigator && navigator.userAgent && navigator.userAgent.indexOf &&
navigator.userAgent.indexOf('Gecko') != -1) ||
(navigator.userAgent.indexOf("Netscape")!= -1))
{
try
{
el.eval("try{" + func + "}catch(e){}");
}
catch(e)
{}
}
else
{
try{el.execScript("try{" + func + "}catch(e){}");}catch(e){};
}
}
else
{

for(;m>=0&&el.parent;m--)
{
el = el.parent;
}
}


var f = el.frames;
var i;

for(i=0; i<f.length; i++)
{
framestruct(f, 0, func);
}

}



greetz Bert

 

[Csaba2000]

In the following case, the browsers (IE6 and Firefox 1.0) do not
complain and show (via the alert) that an IMG element was
inserted as the first child of the top's body element. And yet it is
not displayed. Is this reasonable or not?

Csaba Gabor from Vienna


Main.htm:
<html><head><title>Frame testing</title></head>
<frameset><frame src="TestFrame.htm"></frameset></html>

TestFrame.htm
<html><head><title>Image inserter</title>
<script type='text/javascript'>
function InsertImg() {
var myimg=top.document.createElement('img');
myimg.src="TestImg.jpg";
var firstKid=top.document.body.childNodes[0];
top.document.body.insertBefore(myimg,firstKid);
alert(top.document.body.childNodes[0].tagName);
}
</script></head>
<body onLoad="InsertImg()">
Frame loaded
</body></html>

 

[Marc Poulin]

I'm looking for tutorials or articles considering HTML Frames and how to
handle them with Javascript.

E.g. samples how Frames can exchange information, can a Frame instruct
other Frame to update it's content etc.

This kind of information is welcome.

Cheers!

"JavaScript Application Cookbook" has lots of frame examples.
You can read a sample chapter here:
http://www.oreilly.com/catalog/jscook/chapter/ch01.html

 

[Richard Cornford]

In the following case, the browsers (IE6 and Firefox 1.0)
do not complain and show (via the alert) that an IMG element
was inserted as the first child of the top's body element.
And yet it is not displayed. Is this reasonable or not?

Main.htm:
<html><head><title>Frame testing</title></head>
<frameset><frame src="TestFrame.htm"></frameset></html>

<snip>

It depends on what you consider reasonable. You are adding an IMG as a
child of a FRAMESET and a sibling of a FRAME. The HTML DTDs don't allow
for that and a browser would be within its right to throw some sort of
malformed DOM exception at the attempt. Not throwing such an exception
is demonstrating tolerance, and being tolerant is probably a reasonable
response to the extremely low level of technical rigour in general
Internet authoring.

That the browsers do not show an IMG element inserted in such an
unexpected context is not particularly surprising either (though there
was a single Mozilla release that would display an absolutely positioned
DIV when inserted into a FRAMESET. Obviously that was recognised as a
bug and fixed in subsequent versions).

Richard.