文档章节

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

北京d路飞
 北京d路飞
发布于 2016/06/16 10:06
字数 632
阅读 38
收藏 2
点赞 0
评论 0

 

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对象的引用。

© 著作权归作者所有

共有 人打赏支持
北京d路飞
粉丝 12
博文 13
码字总数 2090
作品 1
朝阳
技术主管
Layer组件多个iframe弹出层打开与关闭及参数传递

一、打开iframe弹出层js代码 1、示例一 2、示例二 3、示例三:在弹出层A中打开新弹出层B,与弹出层A同一DOM层级

HarleyZhuge ⋅ 04/29 ⋅ 0

前端JavaScript实现跨域的方式(转)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,...

easonjim ⋅ 2017/12/27 ⋅ 0

jquery获取父窗口的元素

jquery获取父窗口的元素 取父窗口的元素方法:$(selector, window.parent.document);取父窗口的元素方法:$(selector, parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector,...

壹峰 ⋅ 2016/12/06 ⋅ 0

js (jQuery) 之 取值

都是一些老生常谈,没什么新东西,算是开发过程中不知道怎么写去百度的一些东西 。都说程序员写博客是一个好习惯,算是一份保存笔记,以后不用到处百度然后出来的一些答非所问的答案 。 1: ...

architect刘源源 ⋅ 05/07 ⋅ 0

面试基础(2018-03-16)

1、 Doctype作用?标准模式与兼容模式各有什么区别? 1、声明位于位于HTML文档中的第一行,处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文...

a小磊_ ⋅ 03/16 ⋅ 0

七行JSON代码将你的网站变成移动应用

摘要:本文介绍了借助 Jasonette 将 Web 视图和原生组件融合构建真正“混合”应用的做法。 如果我告诉你,只需要 上述 7 行橙色的 JSON 代码 就可以将一个网站变成移动应用,你相信吗?完全不...

前端之巅 ⋅ 04/18 ⋅ 0

实现多个标签页之间通信的几种方法(sharedworker)

示例地址 prologue 之前在网上看到一个面试题:如何实现浏览器中多个标签页之间的通信。我目前想到的方法有三种:使用websocket协议、通过localstorage、以及使用html5浏览器的新特性SharedW...

ITgecko ⋅ 04/11 ⋅ 0

node.js利用socket.io实现多人在线匹配联机五子棋

项目地址,已上传github ——> client端使用简单的h5+js实现了棋局的总体布局。 server端使用node的socket.io模块与客户端进行数据交互,棋子的落点和输赢校验均是在server端完成。 五子棋u...

dagger95279 ⋅ 05/31 ⋅ 0

talent-tan/tio-websocket-showcase

tio-websocket-showcase 项目介绍 展示tio-websocket的用法,官方提供的唯一tio-websocket示范教程 包括wss和流量监控及处理等高级特性 还包括t-io作者写的一个用于连接websocket服务器的js小...

talent-tan ⋅ 05/06 ⋅ 0

[转]iframe跨域通信的通用解决方案

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

Gmupload ⋅ 2013/09/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

磁盘管理—逻辑卷lvm

4.10-4.12 lvm 操作流程: 磁盘分区-->创建物理卷-->划分为卷组-->划分成逻辑卷-->格式化、挂载-->扩容。 磁盘分区 注: 创建分区时需要更改其文件类型为lvm(代码8e) 分区 3 已设置为 Linu...

弓正 ⋅ 3分钟前 ⋅ 0

Spring源码解析(六)——实例创建(上)

前言 经过前期所有的准备工作,Spring已经获取到需要创建实例的 beanName 和对应创建所需要信息 BeanDefinition,接下来就是实例创建的过程,由于该过程涉及到大量源码,所以将分为多个章节进...

MarvelCode ⋅ 23分钟前 ⋅ 0

a href="#"

<a href="#">是链接到本页,因为你有的时候需要有个链接的样式,但是又不希望他跳转,这样写,你可以把这个页面去试试

颖伙虫 ⋅ 30分钟前 ⋅ 0

js模拟栈和队列

栈和队列 栈:LIFO(先进后出)一种数据结构 队列:LILO(先进先出)一种数据结构 使用的js方法 1.push();可以接收任意数量的参数,把它们逐个推进队尾(数组末尾),并返回修改后的数组长度。 2....

LIAOJIN1 ⋅ 30分钟前 ⋅ 0

180619-Yaml文件语法及读写小结

Yaml文件小结 Yaml文件有自己独立的语法,常用作配置文件使用,相比较于xml和json而言,减少很多不必要的标签或者括号,阅读也更加清晰简单;本篇主要介绍下YAML文件的基本语法,以及如何在J...

小灰灰Blog ⋅ 38分钟前 ⋅ 0

IEC60870-5-104规约传送原因

1:周期循环2:背景扫描3:自发4:初始化5:请求6:激活7:激活确认8:停止激活9:停止激活确认10:激活结束11:远程命令引起的返送信息12:当地命令引起的返送信息13:文件传送20:响应总召...

始终初心 ⋅ 51分钟前 ⋅ 0

【图文经典版】冒泡排序

1、可视化排序过程 对{ 6, 5, 3, 1, 8, 7, 2, 4 }进行冒泡排序的可视化动态过程如下 2、代码实现    public void contextLoads() {// 冒泡排序int[] a = { 6, 5, 3, 1, 8, 7, 2, ...

pocher ⋅ 今天 ⋅ 0

ORA-12537 TNS-12560 TNS-00530 ora-609解决

oracle 11g不能连接,卡住,ORA-12537 TNS-12560 TNS-00530 TNS-12502 tns-12505 ora-609 Windows Error: 54: Unknown error 解决方案。 今天折腾了一下午,为了查这个问题。。找了N多方案,...

lanybass ⋅ 今天 ⋅ 0

IDEA反向映射Mybatis

1.首先在pom文件的plugins中添加maven对mybatis-generator插件的支持 ` <!-- mybatis逆向工程 --><plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-ma......

lichengyou20 ⋅ 今天 ⋅ 0

4.10/4.11/4.12 lvm讲解 4.13 磁盘故障小案例

准备磁盘分区 fdisk /dev/sdb n 创建三个新分区,分别1G t 改变分区类型为8e 准备物理卷 pvcreate /dev/sdb1 pvcreate /dev/sdb2 pvcreate /dev/sdb3 pvdisplay/pvs 列出当前的物理卷 pvremo...

Linux_老吴 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部