从另一个iframe中的链接加载iframe中的页面
Load page in an iframe from a link inside another iframe
我想制作一个包含两个iframe的内容页。一个iframe是带有按钮或链接的浮动边栏,而另一个iframe实际上包含内容。我希望用户能够点击侧菜单上的链接,如"图像",然后有该链接改变其他iframe的内容。我还希望整个单元格,每个标签的菜单(图像,Home,读数),以改变颜色,当鼠标悬停在它。
我尝试了很多东西,但这里是基本的代码:
<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>
,然后内容框架的页面无关紧要。侧边栏的代码是:
<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>
现在链接不工作,但按钮改变颜色
添加一个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>
html 1. 包含
<a href="#" onclick="parent.window.frames['content'].location = './2.html'">load</a>
html 2. 包含
iframe 2 loaded
加载main.html后,您将看到第一个iframe加载了1.html和一个加载链接,单击第一个iframe中的加载链接,然后将2.html加载到另一个内容iframe中。
- 你有2个框架。正确吗?
-
给你的第二个iframe一个名称值:
<iframe name="iframe2" src="content.html"></iframe>
-
为第一个iframe的链接代码添加"target"属性,以第二个iframe的id为目标:
<a href="something.html" target="iframe2">Link Here!</a>
我自己是初学者,希望理解你的问题正确:)
相关文章:
- 如何在iFrame中触发iFrame加载
- 在iframe加载后删除类
- BrowserAction.onClicked等待iframe加载
- Iframe加载调整大小在Chrome中工作,但不能在IE或Firefox中工作
- Dojo:在 iframe 加载时解析 HTML 内容
- Iframe 加载回调被多次调用
- 阻止iframe加载到移动设备上
- 如何将隐藏/显示事件延迟到提交后Iframe加载
- Iframe加载动画不起作用
- iframe 加载事件中的 setTimeout 似乎没有像预期的那样等待 x 秒
- 强制同步 iframe 加载
- 如何javascript调用iframe加载的文件函数
- 显示微调器,直到 iframe 加载 http post 响应
- 在 KnockoutJS 应用程序中将 AngularJS 应用程序作为 iFrame 加载
- 如何捕获 iframe 加载错误
- 在执行函数之前等待多个 iFrame 加载
- JavaScript 在 Iframe 加载时显示加载 gif
- 如何使 iFrame 在 iframe 加载特定页面时重新加载它所在的页面
- 要随索引页一起加载的滚动更新,并在 iframe 加载来自链接的内容时消失
- 一个页面上有多个 Iframe 加载问题