iframe父子页面间数据交互

1、发送消息
postMessage(message, targetOrigin,[transfer])
参数：message：要发送到其他 window的数据
targetOrigin：发送消息窗口的源（协议+主机+端口号），指定哪些窗口能接收到消息
transfer：可选（默认false）

2、接收消息
window.addEventListener("message", function (e) {
   console.log(e)
   console.log(e.data)
               // data：传递来的数据对象
               // source：发送消息的窗口对象
               // origin：发送消息窗口的源（协议+主机+端口号）
   })

注意：始终使用origin和source属性验证发件人的身份

iframe子页面向父页面发送消息：

1、父页面定义方法，子页面调用方法传参

父页面定义方法：
window.getChildVal = function(data){console.log(data)
}
子页面调用方法：
window.parent.getChildVal({title:'自定义标题'})

2、（跨源通信）父页面接收：window.addEventListener("message", function (e) { },false)
iframe页面调用：window.parent.postMessage(data,origin);

父页面向iframe子页面发送消息：

1、父页面定义方法，子页面调用方法获取参数

父页面定义方法：
window.sendChildVal = function(){var title="自定义标题"return title
}
子页面调用方法：
var getVal = window.parent.sendChildVal()
console.log(getVal)

2、（跨源通信）

父页面发送消息：
window.onload = function(){document.getElementById("wcdIframe").contentWindow.postMessage({title:'自定义标题'}, origin);
}
子页面接收：
window.addEventListener("message", function (e) {console.log(e)console.log(e.data)
},false)

iframe父子页面间数据交互相关推荐

iframe父子页面间通信总结
随着网页结构的复杂化,页面内嵌frame越来越常见,但不管是作为内容页来显示,还是作为组件模块嵌入,都有父子页面间通信的需求可能,因此为了更好的实现需求就必须了解父子页面间的通信. iframe子页面 ...
iframe父子页面间的关系
在hbBank项目中,客户信息查询使用了, iframe引入外界的页面,使用代码如下: <iframe id="tab-3" class="hidden" ...
Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
020_Vue非父子组件之间数据交互
1. 非父子组件之间数据交互 1.1. 单独的事件中心管理组件间的通信 var eventHub = new Vue(); 1.2. 监听事件 eventHub.$on('event-name', f ...
页面url带参数_微信小程序云开发教程微信小程序的JS高级页面间数据传递
同学们大家好,我是小伊同学,上一节课我们讲解了全局数据的读写方法,那么在页面间同样需要数据交互,今天我们就来学习这部分内容. 在微信小程序中,我们常常需要将数据在页面之间进行传递,比如用户的身份信息, ...
ASP.NET页面间数据传递的方法
本文我们将讨论的是ASP.NET页面间数据传递的几种方法,对此希望能帮助大家正确的理解ASP.NET页面间数据传递的用处以及便利性. 0.引言 Web页面是无状态的, 服务器对每一次请求都认为来自不同 ...
ASP.NET页面间数据传递的几种方法
1.ASP.NET页面间数据传递的各种方法和分析 1.1 使用Querystring 方法 QueryString 也叫查询字符串, 这种方法将要传递的数据附加在网页地址(URL)后面进行传递.如页面 ...
上传图片至服务器，写入到数据库Blob字段中，以及从数据库读取Blob信息（iframe父子页面传值）(1)
最近做了个用户维护功能,涉及到照片的操作. 照片是存到数据库oracle中的Blob字段中. 难点有两个: 1,图片的上传:2,Blob字段的读取. 先说图片的上传吧, 我使用common-fileu ...
组件间数据交互||父组件向子组件传值-基本使用|| 父组件向子组件传值-props属性名规则
组件间数据交互父组件向子组件传值 1. 组件内部通过props接收传递过来的值 2. 父组件通过属性将值传递给子组件父组件向子组件传值-基本使用 <!DOCTYPE html> < ...

iframe父子页面间数据交互

iframe父子页面间数据交互相关推荐

最新文章

热门文章