iframe父页面跨域向子页面传递消息

简介: iframe父页面跨域向子页面传递消息

使用H5的postMessage()方法

嵌入iframe的父页面

//指定iframe
var iframe = document.getElementById("myiframe").contentWindow;
//发送的消息
var msg = 1;
//嵌入iframe的域名 *表示允许所有域名
var childDomain = "https://api.ehuier.com";

iframe.postMessage(msg, childDomain);

iframe子页面

window.addEventListener('message', function (e) {
//接收消息
    if (e.data == 1) {
        待执行逻辑
    }
}, false);
目录
相关文章
|
5月前
iframe的父子页面通信
【10月更文挑战第2天】
145 2
|
10月前
|
JavaScript 索引
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
|
JavaScript
iframe子页面获取父页面元素,或父页面获取iframe子页面的元素
iframe子页面获取父页面元素,或父页面获取iframe子页面的元素
255 0
|
JavaScript
vue使用iframe 子页面调用父页面的方法
vue使用iframe 子页面调用父页面的方法
163 0
|
人工智能 自然语言处理 JavaScript
vue 父组件将异步请求回来的数据传递给子组件,子组件props可以接收到,但是没有值
vue 父组件将异步请求回来的数据传递给子组件,子组件props可以接收到,但是没有值
98 0
|
前端开发
61EasyUI 表单 - 创建异步提交表单
61EasyUI 表单 - 创建异步提交表单
60 0
|
JavaScript 容器
原生JS路由实现页面跳转
写JS原生路由时可从以下几个方面入手 监听a标签,并给href里的url加锚点链接 一般情况下菜单栏的加载模式中,都是通过<a>中的href='/xxxx’来跳转到指定的页面,所以路由的第一步就是监听到此菜单栏中<a href='/xxx'>的点击事件,并在点击时通过event.preventDefault()阻止浏览器的默认行为。阻止默认行为后,咱们就可以通过#/index这种形式给拿到的url加锚 监听hashchange事件,并在监听被触发时加载对应的页面 通过hashchange函数来监听加了锚之后的url(即hash),监听到hash的变化后,我们可以拿到点击时的url,通过调用R
414 0
|
JavaScript
简单vue父子iframe页面之间跨域通信传值postMessage()
简单vue父子iframe页面之间跨域通信传值postMessage()
1037 0