iframe

最新推荐文章于 2022-12-07 15:26:00 发布

songjg2010

最新推荐文章于 2022-12-07 15:26:00 发布

阅读量101

点赞数

文章标签： javascript iframe

本文链接：https://blog.csdn.net/songjg2010/article/details/84434921

版权

//index.html
<frameset rows="98,*,8" frameborder="no" border="0" framespacing="0" name="centop">
<frame src="top.aspx" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />
<frame src="center.html" name="mainFrame" id="mainFrame" />
<frame src="down.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" />
</frameset>
<noframes><body>
</body>
</noframes></html>

//center.html

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
<tr>
<td><iframe id="I2" name="I2" height="100%" width="100%" border="0" frameborder="0" src="middel.html"> 浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。</iframe></td>
<td width="6" bgcolor="#1873aa" style=" width:6px;"> </td>
</tr>
</table>

//middel.html

<body style="overflow:hidden">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
<tr>
    <td width="171" id=frmTitle noWrap name="fmTitle" align="center" valign="top"><table width="171" height="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
      <tr>
        <td bgcolor="#1873aa" style="width:6px;"> </td>
        <td width="165"><iframe name="I1" height="100%" width="165" src="left.aspx" border="0" frameborder="0" scrolling="no"> 浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。</iframe></td>
      </tr>
    </table>  </td>
    <td width="6" style="width:6px;"valign="middle" bgcolor="1873aa" οnclick=switchSysBar()><SPAN class=navPoint
id=switchPoint title=关闭/打开左栏><img src="images/main_55.gif" name="img1" width=6 height=40 id=img1></SPAN></td>
    <td width="100%" align="center" valign="top"><iframe id="if_center" name="if_center" height="100%" width="100%" border="0" frameborder="0" src="GoogleMap/BaiduMap.aspx"> 浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。</iframe></td>
</tr>
</table>
</body>

//top.html

parent.frames['mainFrame'].document.getElementById('I2').contentWindow.document.getElementById('if_center').contentWindow.document.location.href=parent.frames['mainFrame'].document.getElementById('I2').contentWindow.document.getElementById('if_center').contentWindow.document.location.href;

iframe中元素的获取

iframe本身是一个独立的窗口，获取取中的元素，要先取得这个窗口的document.可以用document.getElementById("iframe_id").contentWindow.document来获得。

参考

一、需求与遇到的问题

　　在网站的后台管理中使用了iframe框架布局，包括顶部菜单、左侧导航和主页面。需求是：点击主页面上的一个按钮，在顶部菜单栏的右侧显示“退出”链接，点击可退出系统。

　　我的思路是：在顶部的菜单页面放一个不可见的“退出”链接，当用户点击位于iframe中的主页面（mainPage.htm）中的按钮时，在顶部菜单页面的右侧显示“退出”。

　　我现在遇到的问题是：如何在页面的一个iframe子页面（mainPage.htm）中获取并且操作其它iframe子页面（比如topPage.htm）中的HTML元素？

二、通过JS获取并操作iframe中的元素来解决问题

　　这里主要就是通过JS来操作Window对象。Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

　　经过我在网上查资料，找到了JS操作iframe中HTML元素的方法。示例如下。

复制代码代码如下:
function ShowExit() {
//获取iframe的window对象
var topWin = window.top.document.getElementById("topNav").contentWindow;
//通过获取到的window对象操作HTML元素，这和普通页面一样
topWin.document.getElementById("exit").style.visibility = "visible";
}　　说明：第一步，通过window.top.document.getElementById("topNav")方法获取了顶部菜单页面（topPage.htm）所在的iframe对象；第二步，通过上一步获取到的iframe对象的contentWindow属性得到了iframe中元素所在的window对象；第三步，通过上一步获取到的window对象来操作iframe框架中的元素，这和操作不在iframe框架中的普通HTML元素是一样的。

详细出处参考： http://www.jb51.net/article/34942.htm

1、子页面访问父页面元素

parent.document.getElementById('id')和document相关的方法都可以这样用

2、父页面访问子页面元素

document.getElementById('iframeId').contentDocument.getElementsByTagName('table'); contentDocument后可以使用document相关方法

3、子页面访问父页面js变量（注：父页面的js变量需为全局变量）

子页面var variable = parent.variableParent (variableParent为父页面定义的变量)

4、父页面访问子页面js变量

这部分目前的解决方案是在父页面设置全局变量，在子页面进行修改后将子页面的变量赋值给父页面

IE FF都可以直接通过Frame的Name来访问,但是FrameSet不支持name属性

注意这样修改frame里的页面有限制，就是必须是同域下的，否则无法访问
如果是同一域下，但是子域名不同，那么涉及到的js，html文件都加上一句。
document.domain = xxx.com [这里填写你的域名]
document.getElementById('iframeid').contentWindow.document.getElementById('someelementid');

songjg2010

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe

//index.html&lt;frameset rows="98,*,8" frameborder="no" border="0" framespacing="0" name="centop"&gt; &lt;frame src="top.aspx" name="topFrame" scrolling="No" nor
复制链接

扫一扫