注意事项

　　一 、 页面加载顺序：一般先加载完父页面才会去加载子页面，所以：必须要确保在iframe加载完成后再进行操作，如果iframe还未加载完成就开始调用里面的方法或变量，会产生错误。判断iframe是否加载完成有两种方法：

　　　　1. iframe上用onload事件

　　　　2. 用document.readyState=="complete"来判断

<iframe name="myFrame" src="2.html"></iframe>

myFrame.onload = function () {

    myFrame.window.document.querySelector("h2").style.color = "#ccc";

}
二、onload事件使用  
　　1. 父页面操作子页面时必须写  myFrame.onload    
　　2. 子页面操作父页面时尽量写  myFrame.onload  一般来说的话 子页面的代码执行时 父页面、子页面都加载完了
三、同域可以操作，跨域不可以操作

方法调用

一、同域下父子页面的通信

父页面调用子页面方法：FrameName.window.childMethod(); --给iframe 添加 name属性；

子页面调用父页面方法：window.parent.window.parentMethod();

DOM元素访问

获取到页面的window.document对象后，即可访问DOM元素

父页面parent.html

<html>

<head>

    <script type="text/javascript">

        function say(){

            alert("parent.html");

        }

        function callChild(){

            myFrame.window.say();

            myFrame.window.document.getElementById("button").value="调用结束";

        }

    </script>

</head>

<body>

    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>

    <iframe name="myFrame" src="child.html"></iframe>

</body>

</html>

子页面child.html

<html>

<head>

    <script type="text/javascript">

        function say(){

            alert("child.html");

        }

        function callParent(){

            parent.say();

            parent.window.document.getElementById("button").value="调用结束";

        }

    </script>

</head>

<body>

    <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>

</body>

</html>

二、跨域父子页面通信方法

如果iframe所链接的是外部页面，因为安全机制就不能使用同域名下的通信方式了。

父页面向子页面传递数据

实现的技巧是利用location对象的hash值，通过它传递通信数据。在父页面设置iframe的src后面多加个data字符串，然后在子页面中通过某种方式能即时的获取到这儿的data就可以了，例如：

1. 在子页面中通过setInterval方法设置定时器，监听location.href的变化即可获得上面的data信息

2. 然后子页面根据这个data信息进行相应的逻辑处理

子页面向父页面传递数据

实现技巧就是利用一个代理iframe，它嵌入到子页面中，并且和父页面必须保持是同域，然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理iframe，然后由于代理的iframe和主页面是同域的，所以主页面就可以利用同域的方式获取到这些数据。使用 window.top或者window.parent.parent获取浏览器最顶层window对象的引用。

问题一 、iframe由iframe中的内容决定高度，不出现滚动条

　　　　要实现这个需要父子iframe同域，父页面读取子iframe的body高度，并设置到iframe高度。同域可以，外链跨域不可以。

js之iframe父、子页面通信的更多相关文章

  1. iframe之父子页面通信

    iframe之父子页面通信 1.获取 子页面 的 window 对象  在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindo ...

  2. jquery、js调用iframe父窗口与子窗口元素的方法整理

    1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 ...

  3. js-关于iframe:从子页面给父页面的控件赋值方法

    项目中我们经会用到iframe,可能还会把iframe里的数值赋值给父页面空间. 接下来我们来说说有关于iframe赋值给父页面的方法. 1.子页面iframe给父页面的控件赋值方法. parent. ...

  4. js Iframe与父级页面通信及IE9-兼容性

    一. postMessage window.postMessage()方法安全地启用Window对象之间的跨源通信:例如,在页面和它产生的弹出窗口之间,或者在页面和嵌入其中的iframe之间. 二.语 ...

  5. 高德地图 JS API (jsp + miniui(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围+搜索)

    -*-  父页面js function mapFocus(){ //console.log("-*-"); var longitude = mini.get("jd&qu ...

  6. Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框

    父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" ...

  7. 主页面获取iframe 的子页面方法。

    父页面parent.html <html> <head> <script type="text/javascript"> function sa ...

  8. 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

    <frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...

  9. iframe框架子页面与父页面间的通信

    需要注意的问题:页面最好放在服务器上测试避免跨域问题. 具体参考:http://www.cnblogs.com/ljhero/archive/2011/07/09/2101540.html

随机推荐

  1. java基础16 捕获、抛出以、自定义异常和 finally 块（以及关键字：throw 、throws）

    1.异常的体系 /* ------|Throwable:所有异常和错误的超类 ----------|Error(错误):错误一般用于jvm或者硬件引发的问题,所以我们一般不会通过代码去处理错误的 -- ...

  2. fedroa20 没法开启ntpd服务器

    1现象:ntpd老是没法开启,ntpd -d显示有个进程占用123端口. [root@vd13crmtb01 ~]# systemctl enable ntpd.service         //开 ...

  3. 详述Linux配置静态IP、设置DNS和主机名（一）

    Linux配置静态IP.设置DNS和主机名首先要找到配置文件,这是在Linux系统下进行工作的必须知道工作方式.后面一步步的跟着这个范例来进行配置相信你最终也会完成Linux配置静态IP.设置DNS和 ...

  4. [笔记]Linux NTP命令 (ESX适用)

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://delxu.blog.51cto.com/975660/307513 [推荐阅读] ...

  5. OpenCV3学习笔记

    http://blog.csdn.net/u010429424/article/details/73691001 http://blog.csdn.net/zhaoxfxy/article/detai ...

  6. 生成元（UVa1583）

    题目具体描述见:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_prob ...

  7. 06易普优APS行业方案：包装印刷行业高级计划排程

    易普优APS行业方案:包装印刷行业高级计划排程 一.包装印刷行业发展概况 网络购物催生包装印刷行业迅猛发展,目前已具有万亿市场规模,全国包装印刷企业总数达30万家,其中规模以上企业只有2万多家,已然成 ...

  8. Educational Codeforces Round 46 (Rated for Div. 2)

    A - Codehorses T-shirts 思路:有相同抵消,没有相同的对答案+1 #include<bits/stdc++.h> #define LL long long #defi ...

  9. oracle 内连接、外连接、自然连接、交叉连接练习

    oracle 内连接.外连接.自然连接.交叉连接练习 --查询员工信息 select * from emp; --查询部门信息 select * from dept; --需求:查询员工姓名.薪资和所 ...

  10. ref:一系列用于Fuzzing学习的资源汇总

    ref:http://www.freebuf.com/articles/rookie/169413.html 一系列用于Fuzzing学习的资源汇总 secist2018-04-30共185833人围 ...