当前位置:网站首页>跨域传递数据(iframe)
跨域传递数据(iframe)
2022-08-04 16:34:00 【凡夫俗子001】
1. Window postMessage() 方法
语法: otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow:其他窗口的一个引用,比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
message:要传递的数据
targetOrigin: 指定哪些窗口能接收到消息事件,其值可以是 *(表示无限制)或者一个 URI。
transfer: 可选,是一串和 message 同时传递的 Transferable 对象。
这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。
2. A页面为父页面,A页面中嵌套B页面(iframe)
<div class="index-map">
<iframe
id="child"
src="https://www.thingjs.com/s/cf19ea9f54dd9329e499bd5e"
frameborder="0"
></iframe>
</div>
<script>
// 接收消息
mounted() {
window.addEventListener("message", function (e) {
if (e.origin == "https://www.thingjs.com") {
console.log("e====", e)
}
});
},
// e.data: 发送过来的数据
// e.origin: 消息源的 URI(可能包含协议、域名和端口),用来验证数据源
// e.source: 消息源,消息的发送窗口/iframe
</script>
3. B页面为iframe页面,即A页面中src所指页面
<template>
<div id="app">
<button @click="add">点击</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
add() {
let message = {
id: 1
}
// top.postMessage(111,'*');
top.postMessage(message ,'*');
}
}
};
</script>
4. 下面错是top.postMessage(message ,'*') 中的message 传的格式不对
边栏推荐
猜你喜欢
随机推荐
B站回应HR称核心用户是Loser;微博回应宕机原因;Go 1.19 正式发布|极客头条
Mobile BesTV_R3300-L_S905L_8189_wire brush firmware package
Real-Time Rendering 4th related resource arrangement (no credit required)
\/ PN的综合实验
【TA-霜狼_may-《百人计划》】美术2.7 Metallic 与 Speculer流程
HCIP笔记(7)
显示和设置系统日期时间的date命令示例
手把手教你搭建一个Minecraft 服务器
软考 --- 软件工程(2)软件开发方法
Hubei Mobile HG680-LV_S905L3B_wire brush firmware package
Heilongjiang Mobile New Magic Hundred Box M411A_2+8_S905L3A_wire brush firmware package
从正负样本解耦看对比学习为何需要large batch size训练Ddcoupled Contrastive learning (DCT)
现代 ABAP 编程语言中的正则表达式
【Jprofile 11.0 安装】
实践:二进制数据处理与封装
5 基本引用类型
数据库内核面试中我不会的问题(2)
什么是APS?APS+MES如何解决生产难题?
不需要服务器,教你仅用30行代码搞定实时健康码识别
贝叶斯优化核极限学习机KELM用于回归预测