javascript 从另一个 iframe 内的链接加载 iframe 中的页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8161459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load page in an iframe from a link inside another iframe
提问by Amber A
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.
我想制作一个有两个 iframe 的内容页面。一个 iframe 是带有按钮或链接的浮动侧边菜单，而另一个 iframe 实际上包含内容。我希望用户能够单击侧边菜单上的链接，例如“图像”，然后让该链接更改其他 iframe 的内容。我还希望菜单（图像、主页、读数）的每个标签在鼠标悬停在其上方时更改颜色的整个单元格。
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:
然后内容 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>
Right now the links do not work, but the buttons do change color
现在链接不起作用，但按钮确实改变了颜色
回答by Jeff Wilbert
Add a nameattribute to your content iframe
name向内容 iframe添加属性
<iframe name="content" src="" frameborder="no" border="0" scrolling="no" width="600" height="800"></iframe>
Change your onclickevents to
将您的onclick活动更改为
parent.window.frames['content'].location = 'url'
For a working example create 3 pages.
对于一个工作示例，创建 3 个页面。
main.htmlcontaining
main.html包含
<iframe src="./1.html"></iframe>
<iframe name="content"></iframe>
1.htmlcontaining
1.html包含
<a href="#" onclick="parent.window.frames['content'].location = './2.html'">load</a>
2.htmlcontaining
2.html包含
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.
加载 main.html 后，您将看到第一个 iframe 加载了 1.html 并带有加载链接，单击第一个 iframe 中的加载链接，然后将 2.html 加载到其他内容 iframe 中。
回答by Onur Yurdupak
- 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>
- 你有 2 个 iframe。正确的？
为您的第二个 iframe 指定名称值：
<iframe name="iframe2" src="content.html"></iframe>将“目标”属性添加到您的第一个 iframe 上的链接代码，以您的第二个 iframe 的 id 为目标：
<a href="something.html" target="iframe2">Link Here!</a>
I am a beginner myself and hopefully understood your question correct :)
我自己是初学者，希望能正确理解您的问题:)
