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

【问题标题】：Load page in an iframe from a link inside another iframe从另一个 iframe 内的链接加载 iframe 中的页面
【发布时间】：2011-11-17 02:43:26
【问题描述】：

我想制作一个包含两个 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固定定位jsfiddle.net/HerrSerker/fC2Zf

标签： javascript html iframe

【解决方案1】：

将name 属性添加到您的内容 iframe

<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 中的加载链接，然后将 2.html 加载到其他内容 iframe。

【讨论】：

【解决方案2】：

您有 2 个 iframe。正确吗？

为您的第二个 iframe 指定名称值：

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

将“target”属性添加到您的第一个 iframe 上的链接代码，以您的第二个 iframe 的 id 为目标：
```
 <a href="something.html" target="iframe2">Link Here!</a>
```

我自己也是初学者，希望能正确理解您的问题:)

【讨论】：