`

iframe

javascript iframe
阅读更多

//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;">&nbsp;</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;">&nbsp;</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" onclick=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

<table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="77%" height="25" valign="bottom"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                   
                    <td width="50" height="19">
                        <div align="center">
                            <img src="images/main_12.gif" width="49" height="19" onclick="window.parent.location.href='index.html'"></div>
                    </td>
                    <td width="50">
                        <div align="center">
                            <img src="images/main_14.gif" width="48" height="19" onclick="javascript:history.go(-1);"></div>
                    </td>
                    <td width="50">
                        <div align="center">
                            <img src="images/main_16.gif" width="48" height="19" onclick="javascript:history.go(1);"></div>
                    </td>
                    <td width="50">
                        <div align="center">
                            <img src="images/main_18.gif" width="48" height="19" onclick="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;"></div>
                    </td>
                    <td width="50">
                        <div align="center">
                            <img src="images/main_20.gif" width="48" height="19" onclick="window.parent.location.href='Login.aspx'"></div>
                    </td>
                    <td width="26">
                        <div align="center">
                            <img src="images/main_21.gif" width="26" height="19"></div>
                    </td>
                    <%-- <td width="100">
                        <div align="center">
                            <img src="images/main_22.gif" width="98" height="19"></div>
                    </td>--%>
                    <td>&nbsp;</td>
                  </tr>
                </table>

 

 

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属性
 
<a href="#" onclick="parent.document.getElementById('cenFrame').cols='185,*,10'">显示菜单</a>
 

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

您还没有登录,请您登录后再发表评论

相关推荐

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

    关于iframe跨域POST提交的方法示例

    以前在面试的时候经常遇到问关于跨域的事儿，所以自己对跨域有一定的概念性了解，知道什么是跨域以及解决跨域的方法，但是具体实际从来没有操作过，直到最近在公司项目中，遇到了一个需要使iframe跨域进行POST提交的...

    div嵌套html不用iframe

    最近在做作业中需要在不用iframe的情况下嵌套页面，所以只好在div中嵌套，用的是jquery方法。 复制代码代码如下: [removed] $(document).ready(function() { $(“#button”).click(function() { $(“#content”)....

    ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)

    刚开始用iframe页面嵌套（第一次尝试使用），但发现iOS系统对iframe嵌套页面的高度和定位控制的不到位，具体表现为，当嵌套的子页面的高度大于父页面的高度，且子页面中有触发弹框事件时，这时，如果子页面高度远远...

    嵌套iFrame使用postMessage相互传递消息（嵌套iFrame、跨父子窗口、跨页面）.zip

    练习说明：使用postMessage可以在iFrame、父子窗口、跨页面等，之间相互传递消息。 你好，我是TKCB-GO，一个有着游戏策划梦想，却沦为程序员的游戏家，这是我的技术博客：www.tkcb.cc 技术博客网站里面，除了我的...

    layui easyweb iframe v3.1.8源码

    [增加] 增加fixed方式的select，可用在表格、滚动弹窗中 [增加] 增加动态模板功能 [增加] 主页工作台、控制台的内容进行了补充完善 ...[优化] iframe版不需要在每个页面写loading了，由框架自动增加 [优

    js获取控制iframe中iframe的src

    js控制/获取a.html中iframe加载的b.html中的iframe，很多人都以为getElementById可以直接获取，其实不行的，以上代码就解决了这个问题，js控制iframe加载页面的iframe，不过测试只在IE和火狐通过，谷歌不行，其他自...

    用iframe提交表单，主要是将表单提交到iframe中，可实现无刷新提交。

    用iframe提交表单，主要是将表单提交到iframe中，可实现无刷新提交。 html页面： &lt;iframe name="FORMSUBMIT" width="1" height="1" &gt;&lt;/iframe&gt; ...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    Iframe自动根据类容改变自己的大小，解决Iframe设置高度后无法缩小！拜一个高人所赐，特表示感谢！

    Iframe页面请求跳转问题解决

    首先在父页面的javascript给定义一个window.name，并赋予一个字符串值，如window.name="test"，其中赋予的字符串值可以随意定义，然后在Iframe页面的Form 标签中定义target属性，并且其值也必须与之前定义的window....

    iframe跨域常用问题和iframe页面自适应

    这是关于iframe使用过程中出现的问题整理的解决方法，关于使用iframe不用单独写接口打通数据，直接把数据通过ifarme嵌套方法传递过去，使用简单方便。

    js改变Iframe中Src的方法

    本文实例讲述了js改变Iframe中Src的方法。分享给大家供大家参考。具体实现方法如下： &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt;...

    iframe消息监听传递

    解决iframe跨域消息传递的问题，并且可以多个iframe间进行消息传递

    layer弹出子iframe层父子页面传值的实现方法

    本文介绍了layer弹出子iframe层父子页面传值的实现方法，分享给大家，具体如下： 父页面获取子页面元素 格式： $("#iframeID").contents().find("#eleID") 示例代码： father.html &lt;!DOCTYPE html&gt; &lt;...

    HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法

    就想弄一个winform结合html5的一个小东西，突有心血来潮，想在里面嵌套一个微信网页版，下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法，一起看看吧

    iframe 跨域访问session

    iframe 跨域访问session问题解决方法

    外部滚动条控制iframe

    外部滚动条控制iframe外部滚动条控制iframe

    flex iframe 支持在flash中嵌套入html jsp asp php等

    flex iframe 支持在flash中嵌套入html jsp asp php等flex iframe 支持在flash中嵌套入html jsp asp php等flex iframe 支持在flash中嵌套入html jsp asp php等flex iframe 支持在flash中嵌套入html jsp asp php等flex...

    iframe自适应高度和宽度

    iframe自适应高度和宽度

    JS去除iframe滚动条的方法

    主要介绍了JS去除iframe滚动条的方法,涉及javascript操作iframe中属性的技巧,非常具有实用价值,需要的朋友可以参考下

Magicbox
Global site tag (gtag.js) - Google Analytics