当前位置:网站首页>跨域传递数据(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 传的格式不对
边栏推荐
- 越来越火的图数据库到底能做什么?
- 全球电子产品需求放缓 三星手机越南工厂每周只需要干 3~4 天
- Check which user permissions are assigned to each database, is there an interface for this?
- 九联_UNT400G_S905L2_(联通)_线刷固件包
- In-depth analysis of HyperBDR cloud disaster recovery 1: Cloud-native cross-platform disaster recovery, making data flow more flexible
- Analysis of Http-Sumggling Cache Vulnerability
- 历史上的今天:微软研究院的创始人诞生;陌陌正式上线;苹果发布 Newton OS
- 数据分析入门导读
- Roslyn 在 msbuild 的 target 判断文件存在
- EMQ云端与局域网实现桥接功能
猜你喜欢

手把手教你搭建一个Minecraft 服务器

【Idea设置运行参数无效】可能是...

\/ PN的综合实验

面试官:多个线程执行完毕后,才执行另一个线程,该怎么做?

Steady Development | Data and Insights on Mobile Game Players in Western Europe

Mobile magic box CM211-1_YS foundry _S905L3B_RTL8822C_wire brush firmware package

奖金池高达 20 万,RTE 2022 创新编程挑战赛正式开启

跨链桥已成行业最大安全隐患 为什么和怎么办

电气成套设备行业如何借助ERP系统,解决企业管理难题?

Visual Studio 2022创建项目没有CUDA模板的解决方法
随机推荐
HCIP笔记(6)
面试官:多个线程执行完毕后,才执行另一个线程,该怎么做?
测试零基础如何进入大厂?一场面试教会你(附面试题解析)
911S5正式谢幕后 如何找到一个好用的替代品
【JVM】JVM调优
LeetCode·每日一题·1403.非递增顺序的最小子序列·贪心
移动魔百盒CM201-1_CW_S905L2_MT7668_线刷固件包
奖金池高达 20 万,RTE 2022 创新编程挑战赛正式开启
Minecraft 服务器安装Forge 并添加Mod
手把手教你搭建一个Minecraft 服务器
js判断一个对象是否在一个对象数组中
【IDEA】idea配置
请问一下dms的跨阿里云账户 新增实例,是不是无法新增redis ?
Real-Time Rendering 4th related resource arrangement (no credit required)
jasmine.any(Function) 的一个使用场景
移动百事通BesTV_R3300-L_S905L_8189_线刷固件包
MetaAI科学家解读最新模型:200+语言互译,扩充千倍翻译数据,全球元宇宙用户自由交流
推荐 7 月份 yyds 的开源项目
Real-Time Rendering 4th相关资源整理(无需积分 传火)
服装店如何利用好积分?