当前位置:网站首页>跨域传递数据(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 传的格式不对
边栏推荐
猜你喜欢

No server is required, teach you to get real-time health code recognition with only 30 lines of code

把boot和APP一起烧录进MCU

贝叶斯优化核极限学习机KELM用于回归预测

8年软件测试感悟,送给刚入测试行业的小伙伴

Heilongjiang Mobile New Magic Hundred Box M411A_2+8_S905L3A_wire brush firmware package

推荐 7 月份 yyds 的开源项目

Mobile Hisense IP102H_905L3-B_wire brush firmware package

张乐:研发效能的黄金三角及需求与敏捷协作领域的实践|直播回顾

07-输入输出系统

Mobile BesTV_R3300-L_S905L_8189_wire brush firmware package
随机推荐
现代 ABAP 编程语言中的正则表达式
NFT盲盒挖矿系统dapp开发NFT链游搭建
生产环境重大bug,update加上索引字段会走索引进行更新?还是走全表扫描
云存储硬核技术内幕——(9) 相见时难别亦难
跨链桥已成行业最大安全隐患 为什么和怎么办
18数藏解析
华为应用市场“图章链接”功能上线 让APP分发突破机型壁垒
Analysis of Http-Sumggling Cache Vulnerability
5 基本引用类型
【TA-霜狼_may-《百人计划》】美术2.7 Metallic 与 Speculer流程
Minecraft 我的世界 .minecraft下的各个文件夹的用处
请问一下dms的跨阿里云账户 新增实例,是不是无法新增redis ?
移动百事通BesTV_R3300-L_S905L_8189_线刷固件包
九联_UNT400G_S905L2_(联通)_线刷固件包
显示和设置系统日期时间的date命令示例
【二叉树】根据描述创建二叉树
DMS 有接口获取每个实例下的数据库列表吗
Mobile magic box CM211-1_YS foundry _S905L3B_RTL8822C_wire brush firmware package
Check which user permissions are assigned to each database, is there an interface for this?
工龄10年的测试员从大厂“裸辞”后...