一、在使用iframe的页面，要操作这个iframe里面的DOM元素可以用：

contentWindow、contentDocument(测试的时候chrom浏览器，要在服务器环境下)

　　contentWindow：非W3C标准，虽然不是标准的一部分，但各个主流浏览器都支持；  返回 frame/iframe 生成的 window 对象。可直接操作子界面中的方法与变量

　　子界面：

//子界面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>子页面</title>

</head>

<body>

<input type=button value="调用父页面中的parentSay()函数" onclick="callParent()">//点击按钮执行函数

<script type="text/javascript">

    var ss = 5;//子界面中的变量

    function childSay()

    {

        alert("我是子页面的say方法");

    }

    function callParent() {

        parent.parentSay();//执行父界面中的函数

    }

</script>

</body>

</html>

　　父界面：

//父界面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>父页面</title>

</head>

<body>

<input type=button value="调用子页面中的函数childSay函数" onclick="callChild()">//点击按钮执行函数

<iframe id="myFrame" src="four.html"></iframe>

<script type="text/javascript">

    function parentSay() {

        alert("我是父页面中的方法");

    }

    function callChild() {

        var child = document.getElementById("myFrame").contentWindow;//获取id为myFrame的iframe的对象

        child.childSay();//执行子界面中的函数

        alert(child.ss);//获取子界面的变量自己用

    }

</script>

</body>

</html>

1.先获取iframe里面的window对象，再通过这个对象，获取到里面的DOM元素

例子：

var ifr = document.getElementById("iframe");

ifr.contentWindow.document.getElementById("XXXXX")

<iframe src="a.html" id=""></iframe>

ifr.contentWindow 这里，返回的是iframe的window对象，所以后面可以接着调用document方法，再接着调用getElementByTagName。那么就可以对iframe里面的元素进行操作了。

二、在iframe本页面，要操作这个iframe的父页面的DOM元素（即嵌套这个iframe的页面）可以用：

window.parent、window.top(这里的TOP是获取的顶层，即有多层嵌套iframe的时候使用)

var ifr = document.getElementByTagName("iframe");

ifr.parent.document.getElementById("XXXXX")

<iframe src="a.html" id=""></iframe>

　　

1、在父页面 获取iframe子页面的元素

（在同域的情况下 且在http://下测试，且最好在iframe onload加载完毕后 dosomething...）

js写法

a、通过contentWindow获取

也有用contentDocument 获取的 但是contentWindow 兼容各个浏览器，可取得子窗口的 window 对象。
contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。

获取方法

  1. var frameWin=document.getElementById('iframe').contentWindow;    //window对象
  2. var frameDoc=document.getElementById('iframeId').contentWindow.document  //document对象
  3. var frameBody=document.getElementById('iframeId').contentWindow.document.body   //body对象

还有iframe.contentDocument 方法 //但是ie 6,7不支持

b、通过frames[]数组获取

(但是必须在ifram框架加载完毕后获取，iframe1是iframe的name属性)

  1. document.getElementById('iframId').onload=function(){
  2. var html= window.frames["name属性"].document.getElementById('iframe中的元素的id').innerHTML;
  3. alert(html)
  4. }
  5. 如果要获取iframe中的iframe
  6. document.getElementById('iframId').onload=function(){
  7. var html= window.frames["name属性"].frames["name属性"].document.getElementById('iframe中的元素的id').innerHTML;
  8. alert(html)
  9. }

jq写法：必须在iframe加载完毕以后才有效

  1. a、$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1 必须在iframe加载完后才有效
  2. b、$("#iframe中的控件ID",document.frames("frame的name").document)//方法2 <span style="font-family: Arial, Helvetica, sans-serif;">必须在iframe加载完后才有效</span>

=================================

2、在iframe中获取父级页面的id元素

（在同域的情况下且在http://下测试，最好是 iframe记载完毕再dosomething）

js写法：

获取父级中的objid

  1. var obj=window.parent.document.getElementById('objId')

window.top 方法可以获取父级的父级的....最顶层的元素对象

jq写法：

  1. $('#父级窗口的objId', window.parent.document).css('height':'height);  // window可省略不写
  2. 或者
  3. $(window.parent.document).find("#objId").css('height':'height);   // window可省略不写

===================================

3、父级窗体访问iframe中的属性

(经测试，在ie中最好用原生的onload事件，如果用jq的load把iframe加载完毕 有时候方法调用不到 多刷新才有效果）

  1. a、 用contentWindow方法
  2. document.getElementById('iframe1').onload=function(){
  3. this.contentWindow.run();
  4. }
  5. b、用iframes[]框架集数组方法
  6. document.getElementById('iframe1').onload=function(){
  7. frames["iframe1"].run();
  8. }

===================================

4、在iframe中访问父级窗体的方法和属性 //window 可以不写

  1. window.parent.attributeName;  // 访问属性attributeName是在父级窗口的属性名
  2. window.parent.Func();  // 访问属性Func()是在父级窗口的方法

5、让iframe自适应高度

  1. $('#iframeId').load(function() { //方法1
  2. var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);
  3. var h=$(this).contents().height();
  4. $(this).height(h+'px');
  5. });
  6. $('#iframeId').load(function() { //方法2
  7. var iframeHeight=$(this).contents().height();
  8. $(this).height(iframeHeight+'px');
  9. });

6、iframe的onload的事件，

主流浏览器都支持 iframe.onload=function....
在ie下需要用attachEvent绑定事件
 

7、在iframe所引入的网址写入防钓鱼代码

if(window!=window.top){
window.top.location.href=window.location.href;
}
 

8、获取iframe的高度

iframe.contentWindow.document.body.offsetHeight;
 
 

1.window.self

对当前窗口自身的引用;self,window.self,window三者是等价的

2.window.top

对顶层窗口的引用，如果本身就是顶层窗口，则返回本身

3.window.parent

对父窗口的引用，如果没有父窗口，则返回本身

 
 
 
 
 
 
 
 
 
 
 
 

contentDocument：

W3C的标准告诉我们，可以通过Dom对象的contentDocument属性来返回文档对象。
doc= document.getElementById('J_mainframe' ).contentDocument
IE6，IE7都不支持，IE8开始支持,需要如此访问 document.frames['J_mainframe'].document;

注意：由于安全原因，文档的内容只能通过同一个域名下的另外一个文档访问。

所有主要浏览器都支持 contentDocument 属性

注意：如果指定了 !DOCTYPE， Internet Explorer 8 及更高版本支持 contentDocument 属性，其他IE版本请使用 contentWindow 属性。

contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。

例1：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script>

function changeStyle(){

    var x=document.getElementById("myframe");

    var y=(x.contentWindow || x.contentDocument);

    if (y.document)y=y.document;

    y.body.style.backgroundColor="#0000ff";

}

</script>

</head>

<body>

<iframe id="myframe" src="demo_iframe.htm">

<p>你的浏览器不支持iframes。</p>

</iframe>

<br><br>

<input type="button" onclick="changeStyle()" value="修改背景颜色">

</body>

</html>

　　例2：

<html>
<head>
<script type="text/javascript">
function getText()
{
var x=document.getElementById("frame1").contentDocument;
alert(x.getElementsByTagName("h3")[0].childNodes[0].nodeValue);
}
</script>
</head>
<body>

<iframe src="/example/hdom/frame_a.html" id="frame1" ></iframe>
<br /><br />
<input type="button" onclick="getText()" value="Get text" />

</body>
</html>

　　

html中子界面与父界面相互操作或传值的更多相关文章

  1. WinForm触摸屏程序功能界面长时间不操作自动关闭回到主界面 z

    操作者经常会在执行了某操作后,没有返还主界面就结束了操作然后离开了,程序应该关闭功能窗体自动回到主界面方便下一位操作者操作.那么对于WinForm程序怎么实现呢? 实现原理:拦截Application ...

  2. HTML教程-各窗口间相互操作(Frame Target)

    由Frames分出来的几个窗口的内容并不是静止不变的,往往一个窗口的内容随着另一个窗口的要求而不断变化,这就提高了Frames的利用价值.为了完成各窗口之间的相互操作,我们必须为每一个窗口起一个名字, ...

  3. 《网络编程》IPv4 与 IPv6 相互操作

    前言 因为互联网终端不断添加.IPv4 地址长度(32位)已不可以满足要求.所以出现了 IPv6地址(128位).可是现有应用程序大部分还是採用 IPv4 地址形式,所以必须解决 IPv4 与 IPv ...

  4. 全面兼容的Iframe 与父页面交互操作

     父页面 Father.htm 源码如下:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  5. 家庭记账本app实现登录注册界面以及仿微信操作界面（共4个实现一个）遇到了麻烦

    今天学习了数据的创建,以及关于数据库的相关操作. 今天主要是实现了对于数据库的增加和查找. 具体的代码如下: 首先是数据库的创建: DBOpenMessage.java package com.exa ...

  6. Winform中子线程访问界面控件时被阻塞解决方案

    public partial class WebData_Import : Form { //声明用于访问主界面的委托类型 public delegate void deleGetOrderdata( ...

  7. 4. NBU文件备份与恢复，图形界面&字符界面操作

    一. 图形界面文件备份与恢复 1.1  文件备份 待补充 1.2 Windows文件恢复 (1) 打开恢复客户端 (2) 检查设置 (3) 查询可恢复信息 (4) 选取恢复时间点和文件 (5) 选择恢 ...

  8. QT+UI界面初识+界面与编辑区结合操作

    图片中时UI界面的初识,了解界面部件都是干啥的: 有了界面之后,使得QT的开发变的更加的便捷,但是在ui界面有时满足不了的功能,就需要使用代码解决,怎么利用代码呢? 首先:打开程序编辑区: #incl ...

  9. git命令行or图形化界面?看这篇操作就够了

    我们在自己的私人分支开发好各自的模块后,就要合并到master,这个时候在idea里边先切换到master,然后update一下获取最新更新,解决一下冲突,最后再合并自己的私人分支,add,commi ...

随机推荐

  1. Code-force 1003 E Tree Constructing

                                                                                                    E. T ...

  2. （大数 string） Integer Inquiry hdu1047

    Integer Inquiry Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  3. Hadoop生态圈-Cloudera Manager扫盲篇

    Hadoop生态圈-Cloudera Manager扫盲篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在讨论CDH.cloueramamager之前,我要问大家几个问题: 1& ...

  4. CentOS 使用 Xfce 桌面并通过 xrdp 登录

    基础环境 CentOS 7.1 最小化安装 安装步骤 以下步骤,均通过ssh连接到主机进行操作. 安装桌面支持 首先安装桌面支持 yum groupinstall "Server with ...

  5. JAVA中初始化ArrayList的三种方式

    下面讲一下ArrayList初始化的几种不同方式. 一.最常用的初始化方式. List<String> list1 = new ArrayList<String>(); lis ...

  6. tcp.validnode_checking踩过的坑

    对Oracle 检查ip合法性,就必须在服务器端的sqlnet.ora文件中设置如下参数 TCP.INVITED_NODES=(10.0.0.36,10.0.0.1,10.0.0.35) TCP.EX ...

  7. SQL语句（二）创建带主键和约束的数据表

    内容摘要 创建带主键和约束的表 创建带组合主键和外键的表 1. 创建带主键和约束的表 Student (学生表) CREATE TABLE Student ( sclass ) NOT NULL, - ...

  8. WebMvcConfigurerAdapter已过时，替换接口或类

    WebMvcConfigurerAdapter已经过时,在新版本2.x中被废弃,原因是springboot2.0以后,引用的是spring5.0,而spring5.0取消了WebMvcConfigur ...

  9. jq版轮播图

    html部分 <div class="banner"> <ul class="img"> <li><img src=& ...

  10. OO第三阶段总结

    软件形式化方法历史 形式化方法的研究高潮始于20世纪60年代后期,针对当时所谓"软件危机",人们提出种种解决方法,归纳起来有两类:一是采用工程方法来组织.管理软件的开发过程:二是深 ...