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!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Calling iframe function more than once fails. 1

Status
Not open for further replies.

MarkZK

Technical User
Jul 13, 2006
202
0
0
GB
Hi all,

I normally avoid iframes and wish I was right now!..., could someone explain to me what is going wrong with this code (I've made this just to recreate the error).

In the main page I have,

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
    //<![CDATA[
	function testcall(){
    window.frames["theFrame"].calltest();
    document.getElementById('testbtn').style.display = 'none';
	}
	function populate(num){
    document.getElementById('testbtn').style.display = 'inline';
    document.getElementById('iHolder').innerHTML = '<iframe src="test'+num+'.html" id="theFrame" name="theFrame"><\/iframe>'
	}
    //]]>
    </script>
<div id="example">
<div id="iHolder">
</div>
    <form>
      <input type="button" id="testbtn" value="Test Me" onclick="testcall();" style="display:none;" />
    </form>
</div>
    <form>
      <input type="button" onclick="populate('1');" value="Set 1" />
      <input type="button" onclick="populate('2');" value="Set 2" />
    </form>
  </body>
</html>

In test1.html

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <script type="text/javascript">
    function calltest(){
    alert('I was called 1 ?');
    }
    </script>
    <title></title>
  </head>
  <body>
  </body>
</html>

and finally test2.html

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <script type="text/javascript">
    function calltest(){
    alert('I was called 2 ?');
    }
    </script>
    <title></title>
  </head>
  <body>
  </body>
</html>
......................................

I can click either of the those buttons when the page loads and it will populate the iframe with the right page (test1.html or test2.html), then I can click the "test me" button and I'll receive the alert, but once I try clicking it for the second time I get an error in FF console stating "window.frames.theFrame.calltest is not a function" even though it's on both pages.

Does anyone have any ideas what is going wrong here ?.

Thanks! :)
 
Hi

Let us do some debugging with FireBug, after the second "Set 1" press :
Code:
[blue]>>> window.frames.length[/blue]
[navy]1[/navy]
[blue]>>> window.frames[0].name[/blue]
[red]"theFrame"[/red]
[blue]>>> window.frames[0][/blue]
[green][b]Window[/b][/green] [gray][i]test1.html[/i][/gray]
[blue]>>> window.frames[0].calltest[/blue]
[green]calltest()[/green]
[blue]>>> window.frames['theFrame'][/blue]
[green][b]Window[/b][/green]
[blue]>>> window.frames['theFrame'].calltest[/blue]
I would say, the problem comes from creating another [tt]iframe[/tt] with the same [tt]id[/tt]. I would avoid creating other [tt]iframe[/tt]s if one already exists :
Code:
[b]function[/b] populate[teal]([/teal]num[teal])[/teal]
[teal]{[/teal]
  document[teal].[/teal]getElementById[teal]([/teal][green][i]'testbtn'[/i][/green][teal]).[/teal]style[teal].[/teal]display [teal]=[/teal] [green][i]'inline'[/i][/green][teal];[/teal]
  [b]if[/b] [teal]([/teal]fra[teal]=[/teal]document[teal].[/teal]getElementById[teal]([/teal][green][i]'theFrame'[/i][/green][teal]))[/teal] [teal]{[/teal]
    fra[teal].[/teal]src[teal]=[/teal][green][i]'test'[/i][/green][teal]+[/teal]num[teal]+[/teal][green][i]'.html'[/i][/green]
  [teal]}[/teal] [b]else[/b] [teal]{[/teal]
    document[teal].[/teal]getElementById[teal]([/teal][green][i]'iHolder'[/i][/green][teal]).[/teal]innerHTML [teal]=[/teal] [green][i]'<iframe src="test'[/i][/green][teal]+[/teal]num[teal]+[/teal][green][i]'.html" id="theFrame" name="theFrame"><[/i][/green][lime][i]\/[/i][/lime][green][i]iframe>'[/i][/green]
  [teal]}[/teal]
[teal]}[/teal]

Feherke.
 
You're correct, Thank you Feherke !!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top