文档章节

【转】js之iframe子页面与父页面通信

北京d路飞
 北京d路飞
发布于 2016/06/16 10:06
字数 632
阅读 226
收藏 3

码上生花,ECharts 作品展示赛正式启动!>>>

 

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。

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

父页面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>

复制代码

方法调用

父页面调用子页面方法:FrameName.window.childMethod();

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

DOM元素访问

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

注意事项

要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误。判断iframe是否加载完成有两种方法:

1. iframe上用onload事件

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

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

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

父页面向子页面传递数据

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

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

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

子页面向父页面传递数据

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

本文转载自:http://www.cnblogs.com/sydeveloper/p/3712863.html

北京d路飞

北京d路飞

粉丝 12
博文 13
码字总数 2090
作品 1
朝阳
技术主管
私信 提问
加载中
请先登录后再评论。
附实例!实现iframe父窗体与子窗体的通信

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表于云+社区专栏 本文主要会介绍如何基于MessengerJS,实现iframe父窗体与子窗体间的通信,传递数据信息。同时本...

腾讯云加社区
2018/11/16
22
0
[转]iframe跨域通信的通用解决方案

一、背景 在这个Web页面越来越丰富的时代,页面通过iframe嵌入其他的页面也越来越常见。但由于浏览器同源策略的限制,不同域之间属性和操作是无法直接交互的,所以在这个时候,开发者多多少少...

Gmupload
2013/09/24
145
0
web开发,使用JS在多个页面、多个标签页面之间相互通信与调用

GitHub:https://github.com/roomanl/eventJS 这几天做一个web项目有这样一个需求,web项目是一个后台管理系统,在使用系统时会打开很多标签页,每个标签页就是一个iframe打开的一个新的htm...

osc_d5exiys5
2018/07/13
3
0
JQuery javascript实现父子页面相互调用

javascript实现父子页面相互调用 By:授客 QQ:1033553122 场景1 父页面调用子页面 如上图,在iframe子页面的<script>元素中,定义了taskStatus全局变量,如果希望在其父页面中获取该全局变量...

osc_sehzzy9h
2019/07/18
3
0
js 获取iframe页面元素

js 获取iframe页面元素 CreationTime--2018年8月16日18点00分 Author:Marydon <!-- chart图表 --><iframe id="myframe" src="<c:url value="/base/server/report/report.do?REPORTID=${para......

osc_wzff35x1
2018/08/16
2
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊puma的ChangedEvent

序 本文主要研究一下puma的ChangedEvent Event puma/core/src/main/java/com/dianping/puma/core/event/Event.java public abstract class Event implements Serializable {private stat......

go4it
昨天
11
0
为什么Kubernetes和容器与机器学习密不可分?

当前,数字化转型的热潮在IT领域发展的如火如荼,越来越多的企业投身其中,机器学习和人工智能等现代技术的融合在公司组织内部也逐渐流行起来。 随着那些构成企业复杂IT基础架构的技术日益成...

京东智联云开发者
昨天
5
0
协程swoole对比golang

协程概念 协程(Coroutines)是一种比线程更加轻量级的存在,正如一个进程可以拥有多个线程一样,一个线程可以拥有多个协程。 协程具有以下几个特点 用户态执行,完全由程序所控制,不是被操...

冻结not
昨天
5
0
如何在macOS或OS X上安装pip? - How do I install pip on macOS or OS X?

问题: This post is a Community Wiki . 这篇文章是社区维基 。 Edit existing answers to improve this post. 编辑现有答案以改善此职位。 It is not currently accepting new answers. 它......

fyin1314
昨天
11
0
net.sf.JSONException Map中value字段为null,服务响应500

6月2号凌晨系统生产发布,2号白天仓库作业时有仓库拣选单打印面单接口500,不是所有的拣选单掉接口都是500, 当时通过接口响应正产和响应500,逻辑梳理以及数据对比,最后发现是Map 对象里面...

Lbj虞
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部