How to change iframe's content?

JavaScript
1

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…

2

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

3

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

<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

4

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

<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>
5

Nice one! I like that :slight_smile:

Andy

6

Thanks a lot for your help guys!
Will try it first thing when i get back home…