CODEWITHSUNDEEP
javascripthtmliframe
Amber A
Amber A

Reputation: 41

Load page in an iframe from a link inside another iframe

I want to make a content page where there are two iframes. One iframe is a floating sidemenu with buttons or links whereas the other iframe actually contains the content. I want the user to be able to click a link on the sidemenu such as "Images" and then have that link change the content of the other iframe. I also want the entire cell that each label for the menu (Images, Home, Readings) to change color when the mouse hovers over it.

I have tried many things but here is the basics of the code:

   <html>
<head>
<title>Main Content Page</title>
</head>
<body background="background.jpg">
<table>
<th>
    <iframe src="sidebar.html" frameborder="no" border="0" scrolling="no" height="750" width="450"></iframe>
<th>
    <iframe id ="content" src="" frameborder="no" border="0" scrolling="no" width="600" height="800"></iframe>
</table>
</body>
</html>

and then the pages for the content iframe do not matter. The code for the sidebar is:

<html>
<head>
<title>Main</title>
<base target="content">
<style type="text/css">
body{bgcolor: black;}
a{color: white}
a:link, a:visited{background-color: black}
<!--a:hover{background-color: gray}-->
<!--td:hover{background-color: gray}-->
buttons:hover{background-color: gray}

td, th{border:1px solid black; background-color:black;}
table{border:1px solid gray;}
td {font-family: Kunstler Script; color: white; font-size: 72; padding:15px;}
</style>
</head>
<body>
<table align="center">
    <tr><div class="buttons"><div><td onclick="target.content.home.href='html'">Home</div>
    <tr><div><td onclick="target.content.href='images.html'">Images</div>
    <tr><div><td onclick="target.content.href='readings.html'">Readings</div></div>
</table>

</div>
</body>
</html>

Right now the links do not work, but the buttons do change color

Upvotes: 4

Views: 26057

Answers (2)

Onur Yurdupak
Onur Yurdupak

Reputation: 71

  • You have 2 iframes. Correct?

  • Give an name value to your 2nd iframe:

     <iframe name="iframe2" src="content.html"></iframe>

  • Add "target" attribute to link codes on your 1st iframe targetting the id of your 2nd iframe:

     <a href="something.html" target="iframe2">Link Here!</a>

I am a beginner myself and hopefully understood your question correct :)

Upvotes: 0

Jeff Wilbert
Jeff Wilbert

Reputation: 4520

Add a name attribute to your content iframe

<iframe name="content" src="" frameborder="no" border="0" scrolling="no" width="600" height="800"></iframe>

Change your onclick events to

parent.window.frames['content'].location = 'url'

For a working example create 3 pages.

main.html containing

<iframe src="./1.html"></iframe>
<iframe name="content"></iframe>

1.html containing

<a href="#" onclick="parent.window.frames['content'].location = './2.html'">load</a>

2.html containing

iframe 2 loaded

Upon loading of main.html you'll see the first iframe loaded 1.html with a load link, clicking the load link in the first iframe then loads 2.html into the other content iframe.

Upvotes: 4

Related Questions