Javascript and frame problem

Drazen1 · Oct 2, 2007

Hi everyone,

Here is a problem that I have.

In the age I call Iframe through Javascript (have to because of tracker).
<div id="gads1"></div>

document.getElementById('gads1').innerHTML ="<iframe name='google_ads_frame' id='google_ads_frame' src='

http://mysite.com/iframe_file.htm'></iframe>";

How can I access the variables from the iframe document to use in javascript in the main (parent) document?

if it was ordinary Iframe - no problem.
But this is javascript calling IFrame and the usual approach doesn't work.

I appreciate any suugestions.

~Drazen

feherke · Oct 2, 2007

Hi

And what is the usual approach ? And how you implemented it ?

Are you sure the [tt]iframe[/tt] is created and its content loaded before you attempt to access it ?

Feherke.

http://rootshell.be/~feherke/

Drazen1 · Oct 2, 2007

Hi feherke,

The usual approach (and I tested it) would be
to get the second variable to write out in the second DIV like this:

parent.document.getElementById('gads2').open();
parent.document.getElementById('gads2').innerHTML=sB;
parent.document.getElementById('gads2').close();

this code would be in the iframe of course.
However - it works only if you use normal Iframe tag.
Once you call it from javascript (as explained above)
it just won't do it anymore.

I am positive that the javascript in the iframe works
because I can write both variables in that gads1 frame.

My problem is getting second variable to write out in another DIV (and I can't call the iframe twice).

Tricky...
Hence the post

tsuji · Oct 2, 2007

>to get the second variable to write out in the second DIV like this:
What second variable, second DIV? Similarly what is gads2, sB,... sounds all very deep, too deep for you to handle.

This is how thing communicate (I use your using of innerHTML to load up the iframe... I may not like it, but I am only interested in answering perplexity as per op's way of seeing thing.) This is a quick demo of how things communicate using only id (using name of iframe would be slightly different.)

[1] The iframe source page.
[tt]
<!-- given a name of [blue]diviframe[/blue].htm --"
<html>
<head>
<script language="javascript">
function changeit() {
document.getElementById("divid").innerHTML=Math.floor(Math.random()*10000);
}
function getit_parent() {
document.getElementById("div_result").innerHTML=parent.document.getElementById("divid").innerHTML;
}
</script>
</head>
<body>
<div id="divid">innerHTML of divid in the iframe source</div>
<button onclick="changeit()">change div innerHTML</button><br />

<div id="div_result">get parent's div innerHTML here</div>
<button onclick="getit_parent()">get parent's div innerHTML</button><br />
</body>
</html>
[/tt]
[2] The parent page.
[tt]
<html>
<head>
<script language="javascript">
function loadup() {
document.getElementById("div_iframe").innerHTML="<iframe name='xname' id='xid' src='[blue]diviframe.htm[/blue]'></iframe>";
}
window.onload=loadup;

function changeit() {
document.getElementById("divid").innerHTML=Math.floor(Math.random()*10000);
}
function getit_iframe() {
document.getElementById("div_result").innerHTML=document.getElementById("xid").contentWindow.document.getElementById("divid").innerHTML;
}
</script>
</head>
<body>
<div id="div_iframe"></div>

<div id="div_result">get iframe div innerHTML here</div>
<button onclick="getit_iframe()">get iframe div innerHTML</button><br />

<div id="divid">innerHTML of div in parent</div>
<button onclick="changeit()">change div innerHTML</button><br />
</body>
</html>
[/tt]

Drazen1 · Oct 2, 2007

Posting solution for anyone who runs into the similar problem.

Iframe document:
<html>
<head>
<script language="javascript">
var sA='Stuff A';
var sB='Stuff B';
function passToDIV1(t)
{
var x = window.parent;
x = x.showValueSA;
x(t);
}
function passToDIV2(t2)
{
var x2 = window.parent;
x2 = x2.showValueSB;
x2(t2);
}
passToDIV1(sA);
passToDIV2(sB);
</script>

</head>
<body>
</body>
</html>

Main (parent) document:
<html>
<head>
<script language="javascript">
function getFrame(){
document.getElementById("theiframe").innerHTML="<iframe src='iframe.htm' frameborder='0'></iframe>";
}
function showValueSA(x)
{document.getElementById("div_A").innerHTML=x;}

function showValueSB(x2)
{document.getElementById("div_B").innerHTML=x2;}

window.onload=getFrame;

</script>
</head>
<body>
<div id="theiframe"></div>
<div id="div_A"><br></div>
<br><br><br><br>
<div id="div_B"><br></div>
</body>
</html>

Tsuji's solution is ok too, BUT with a caveat that data gets displayed twice (in Iframe + a copy in the parent).
This solution handles variables directly so it is more flexible for any purpose and can be easily extended to more than 2 variables.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript and frame problem

Drazen1

Programmer

feherke

Programmer

Drazen1

Programmer

tsuji

Technical User

Drazen1

Programmer

Similar threads

Part and Inventory Search

Sponsor