从另一个iframe内的链接加载iframe中的页面

3
我希望创建一个内容页面,其中有两个iframe。一个iframe是浮动的侧边菜单,具有按钮或链接,而另一个iframe实际上包含内容。我希望用户能够点击侧边菜单上的链接,例如“图片”,然后使该链接更改另一个iframe的内容。我还希望鼠标悬停在每个菜单标签(图片、主页、阅读)上时,整个单元格的颜色都会改变。
我尝试了很多方法,但以下是代码的基础部分:
   <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>

然后,内容 iframe 的页面就不重要了。侧边栏的代码如下:

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

目前链接不可用,但按钮会改变颜色。


好的,不要这样做,使用CSS固定定位 http://jsfiddle.net/HerrSerker/fC2Zf/ - yunzen
2个回答

4

为您的内容iframe添加一个name属性

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

将您的onclick事件更改为

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

为了提供一个工作示例,请创建3个页面。
其中main.html包含以下内容:
<iframe src="./1.html"></iframe>
<iframe name="content"></iframe>

1.html 包含以下内容:

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

2.html 包含的内容:

iframe 2 loaded

在加载 main.html 页面时,你会看到第一个 iframe 中已经加载了 1.html,它包含了一个“加载”链接。点击第一个 iframe 中的 “加载” 链接,将会在另一个内容的 iframe 中加载 2.html。

0
  • 你有2个iframe。对吗?
  • 给你的第二个iframe一个名称值:

     <iframe name="iframe2" src="content.html"></iframe>
    
  • 在你的第一个iframe上添加“target”属性,将链接代码定位到第二个iframe的id:

     <a href="something.html" target="iframe2">这里是链接!</a>
    

我自己也是一个初学者,希望我理解了你的问题 :)


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接