当前位置:网站首页>跨域传递数据(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 传的格式不对
边栏推荐
- 在VMD上可视化hdf5格式的分子轨迹文件
- Matlab计算随模拟时间变化的热导率
- Real-Time Rendering 4th related resource arrangement (no credit required)
- 华为应用市场“图章链接”功能上线 让APP分发突破机型壁垒
- No server is required, teach you to get real-time health code recognition with only 30 lines of code
- 闭包及闭包的使用
- JVM Tuning-GC Fundamentals and Tuning Key Analysis
- UWP WPF 解决 xaml 设计显示异常
- 把boot和APP一起烧录进MCU
- 请问一下dms的跨阿里云账户 新增实例,是不是无法新增redis ?
猜你喜欢
随机推荐
查看每个数据库分配给了哪些用户权限,这个有接口吗
LeetCode·每日一题·1403.非递增顺序的最小子序列·贪心
会话劫持安全攻击
备战9月,美团50道软件测试经典面试题及答案汇总
跨链桥已成行业最大安全隐患 为什么和怎么办
微信小程序获取年月日周及早上、中午、晚上
SAP HANA Schemas 和 HDI Containers
移动魔百盒CM211-1_YS代工_S905L3B_RTL8822C_线刷固件包
Minecraft HMCL 使用认证服务器LittleSkin进行登录
线上一次JVM FullGC搞得整晚都没睡,彻底崩溃
移动百事通BesTV_R3300-L_S905L_8189_线刷固件包
SAP 电商云 Spartacus UI SSR 里 engine 和 engine instance 的区别
从正负样本解耦看对比学习为何需要large batch size训练Ddcoupled Contrastive learning (DCT)
[TA-Frost Wolf_may-"Hundred Talents Project"] Art 2.7 Metallic and Speculer Process
九联_UNT400G_S905L2_(联通)_线刷固件包
跟我学 UML 系统建模
8年软件测试感悟,送给刚入测试行业的小伙伴
基本的SELECT语句
历史上的今天:微软研究院的创始人诞生;陌陌正式上线;苹果发布 Newton OS
在VMD上可视化hdf5格式的分子轨迹文件