View Full Version : need code to swap out pages after clicking a link or button

03-11-2014, 03:02 PM
so I have an iframe.html and a index.html page.... the fixed iframe is across the top of the page and should act kind of as the navigation menu... I want to put 3 links in the iframe that when clicked on will change the index page to a different one..

for example: clicking link 1 from the iframe will change the index.html to index2.html and so on.....

is there code anywhere that I can use for that?

03-11-2014, 06:22 PM
Sounds like you need to use the target attribute and possibly a named iframe. However without seeing a live mock-up, its hard to visualise what you're describing.

The following responses should help: http://www.w3schools.com/tags/att_a_target.asp and http://www.w3schools.com/tags/att_iframe_name.asp

If you need more help, please provide a link to your page.

03-11-2014, 09:06 PM
You should do it the other way round. Navigation menu in the main page, content pages in the iframe. Example:

<!doctype html>
<html >
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


body {font-family: verdana; font-size: 12px; background: #dedede}


<body >

<div style="position: relative; text-align: center">
<a href="javascript: void(0)" onclick="location.search='http://www.dynamicdrive.com'">DynamicDrive</a>
<a href="javascript: void(0)" onclick="location.search='http://www.dynamicdrive.com/forums'">DynamicDriveForums</a>
<a href="javascript: void(0)" onclick="location.search='http://edition.cnn.com'">CNN</a>

<iframe name="ifr" style="position:absolute; left:10%; top: 10%; width:80%; height: 80%; background: white" src="http://www.dynamicdrive.com"></iframe>

var data=location.search;
data = location.search.substring(1); // needed to remove the '?'


This method is bookmarking friendly.

03-12-2014, 09:53 AM
How do I remove the borders of the iframe? frameborder=0 does not work..

also scrolling=no doesn't work either

03-12-2014, 10:41 AM
This will work:

<iframe name="ifr" style="position:absolute; left:10%; top: 10%; width:80%; height: 80%; background: white" src="http://www.dynamicdrive.com" scrolling="no" frameborder="0"></iframe>