Cross frame scripting, altering a hyperlink in a child frame

[jwhittlestone]

Hi people,

With a non-frames page, I wanted to alter an anchor/hyperlink using javascript so i used the following code:

<code>
function changelink()
{
homebutton = document.getElementById("mainNav").firstChild;
homebutton.href = "anotherurldotcom";
}
</code>

This function was invoked with onload as an attribute of the body tag. This worked fine.

Now, the eventual outcome, is to do this with a framed page, but I have no idea how this is done!

So, i tried this function that is defined in the parent frame

<code>
function changelink()
{
homelink = window.frames["mainFrame"].getElementById("mainNav").firstChild;
homelink.href = "anotherurldotcom";
}
</code>

And then invoked it with an onload() attribute of the frame tag

But it doesn't seem to want to play ball.

You can see my efforts here..



barbaryonline.com/jw/t3_temp/

thanks for any help that you may be able to shed on this tricky one (for me)

jon

 

[tsuji]

[1] I would avoid .firstChild: you are at the mercy of default setting (ignore or preserve whitespace) of browser. By fate, ie and moz/ff choose the opposition, maybe for political reason or trying to make a political statement. Simply use .getElementsByTagName("a") and choose the first encounter if exists.
[tt]
function changelink()
{
[red]//[/red]homebutton = document.getElementById("mainNav").firstChild;
[blue]homebutton = document.getElementById("mainNav").getElementsByTagName("a")[0];
if (homebutton) {[/blue]
homebutton.href = "anotherurldotcom";
[blue]}[/blue]
}
[/tt]
[2] For iframe, use a reference to its id to be working more readily cross-browser.
[tt]
<iframe id="mainFrame" src="..."><iframe>
[/tt]
[3] If you mean to have the changelink as onload handler in the top window, you then do it like this. (I add var, I don't like sloppy scope.)
[tt]
function changelink()
{
var homebutton = document.getElementById("mainFrame").contentWindow.document.getElementById("mainNav").getElementsByTagName("a")[0];
if (homebutton) {[/blue]
homebutton.href = "anotherurldotcom";
}
}
[/tt]

 

[jwhittlestone]

Tsuji - thanks so much, really helpful, i implemented your solution, i've just encountered a problem though..

Just realised, that I only invoke this function when the frameset loads, but as I want the hyperlink to change each time the frame reloads, i don't have access to the child page, or the link in question.. (it does belong to me, but it is a CMS-ed site)

Have you got any ideas? I had a look into registering an event handler, but quickly got in above my depth!

thanks very much in advance

jon at cashcade.

 

[tsuji]

If the iframe loading is a problem, which is a legitime concern, you can try monitor the document's readyState to start with. (Complications may still remain.) But if there is cross-domain security concern here, luck may be running short.
[tt]
function changelink() {
var odoc=document.getElementById("mainFrame").contentWindow.document;
if (odoc.readyState=="complete") {
var homebutton = odoc.getElementById("mainNav").getElementsByTagName("a")[0];
if (homebutton) {
homebutton.href = "anotherurldotcom";
}
} else {
setTimeout("changelink()",200);
}
}
[/tt]

 

[jwhittlestone]

hmm, that doesn't appear to work. Is there not a way that i can create an event handler on the top page, that says

"everytime the mainNav changes address, invoke the changeLink function"?

thanks a lot for your help

j

see attached, the current solution..

 

[tsuji]

[0] My last post may not help to establish the event, certainly not. Apart from that, it is ie-specific; for moz further writing up is needed. Hence, you may ignore that.

[1] To establish the event on the iframe, you can sure use an inline handling and that would be the simplest.
[tt]
function detect() {
alert("Load event is detected"); //or do things
}
[/tt]
with the inline event handling.
[tt]
<iframe id="mainFrame" src="...etc..." onload="detect()">iframe support needed</iframe>
[/tt]
[2] If you want to establish that in the changelink() after the link has been changed, ie making it from no onload handler to having one, it can be done like this.
[tt]
function changelink() {
var homebutton = document.getElementById("mainFrame").contentWindow.document.getElementById("mainNav").getElementsByTagName("a")[0];
if (homebutton) {
homebutton.href = "anotherurldotcom";
}
if (window.addEventListener) {
document.getElementById("mainFrame").addEventListener("load",detect,false);
} else if (window.attachEvent) {
document.getElementById("mainFrame").attachEvent("onload",detect);
}
}
[/tt]

 

[jwhittlestone]

excellent, thanks so much