How to change iframe's content?

**SkyNet** · Dec 11, 2003, 05:46

Hi!

It goes like this...i got a page with menus on top and an iframe in the middle of this page. Now what i want to know is how can i change iframe's content when i click on the menu's hyperlinks. Like when i click the "About" in the menu i want to see about.html in iframe.
I hope you understood what i'm trying to do...

**Ruchir** · Dec 11, 2003, 06:28

Is this what u mean ? . then u could do what has been done in the page mentioned, and have links outside that part, and connect the two pages in that manner..

-ruchir

**awestmoreland** · Dec 11, 2003, 06:47

If you keep the link IDs the same as the page names (minus the extention) then you could use this: DEMO

Code:

<html>
  <head>
	<title>Change iFrame Contents</title>
	<script language="JavaScript" type="text/javascript">
	<!--
	  function changeFrame(newPage){
		document.getElementById('myframe').src = newPage + ".html";
	  }
	//-->
	</script>
  </head>
  <body>
	<div align="center">
	  <span id="menu">
		<a href="#" id="default" onClick="changeFrame(this.id)">Home</a>
		<a href="#" id="about" onClick="changeFrame(this.id)">About</a>
		<a href="#" id="contact" onClick="changeFrame(this.id)">Contact</a>
	  </span>
	  <br><br>
	  <iframe src="default.html" id="myframe">
		You can't see iFrames  :(
	  </iframe>
	</div>
  </body>
</html>

If you really must have the IDs and page names different, then that would be a minor change but would mean that your code wasn't quite as generic.

Andy

**vgarcia** · Dec 11, 2003, 07:18

This builds on awestmoreland's script, but it's more accessible if Javascript and/or iframes are unavailable.

Code:

<html>
  <head>
	<title>Change iFrame Contents</title>
	<script language="JavaScript" type="text/javascript">
	<!--
	  function changeFrame(newPage){
		document.getElementById("myframe").src = newPage;
	  }
	//-->
	</script>
  </head>
  <body>
	<div align="center">
	  <span id="menu">
		<a href="default.html" id="default" onClick="changeFrame(this.href); return false;">Home</a>
		<a href="about.html" id="about" onClick="changeFrame(this.href); return false;">About</a>
		<a href="contact.html" id="contact" onClick="changeFrame(this.href); return false;">Contact</a>
	  </span>
	  <br><br>
	  <iframe src="default.html" id="myframe">
		You can't see iFrames  :(. Use the links above to get to our pages :).
	  </iframe>
	</div>
  </body>
</html>