两个跨域页面通信(iframe) (postMessage)

两个跨域页面通信(iframe) (postMessage)

在浏览器的安全模型中,JavaScript通常只能访问与当前网页具有相同源(协议、域名、端口)的 localStorage 数据,
这意味着,如果你的网页想要访问其他网站的localStorage数据,通常是不被允许的。

那么如何获取呢???

方法1:
有一种方法可以实现跨域获取其他网站的 localStorage 数据,那就是通过使用浏览器插件或扩展程序,
一些浏览器插件或扩展程序可以获取浏览器中的 localStorage 数据,并且可以跨域访问其他网站的 localStorage 数据,
但需要注意的是,这种方法需要用户安装相应的插件或扩展程序,并且需要用户授权才能进行操作。
方法2:
如果你是在与第三方网站合作的情况下,可以考虑使用跨文档消息(postMessage)来实现不同域名之间的通信,而不是直接访问 localStorage 数据,
通过在不同域名的网页之间发送消息,可以实现安全的跨域通信,而无需直接访问对方网页的 localStorage 数据。

总之,
由于浏览器的安全限制,直接在 JavaScript 中跨域获取其他网站的 localStorage 数据是不被允许的,
需要通过浏览器插件、扩展程序或者与第三方网站合作来实现这一功能。


postMessage

跨文档消息(postMessage)是一种在不同窗口或 iframe 之间安全地进行跨域通信的方法,
通过 postMessage,一个窗口可以向另一个窗口发送消息,并且可以在不同的域名、协议和端口之间进行通信。postMessage方法接受两个参数:要发送的消息、目标窗口的源,目标窗口的源可以是一个 URL 字符串,表示消息接收方的源,或者是一个表示消息接收方的窗口对象(例如 iframe 的 contentWindow),接收消息的窗口可以通过监听 message 事件来接收消息。

举例:演示如何在父窗口和 iframe 之间使用 postMessage 进行通信:

在父窗口中:


// 监听来自 iframe 的消息
window.addEventListener('message', function(event) {// 确保消息来自预期的源if (event.origin !== 'http://example.com') {return}// 处理接收到的消息console.log('Received message from iframe:', event.data)
})// 向 iframe 发送消息
var iframe = document.getElementById('myIframe')
iframe.contentWindow.postMessage('Hello from parent!', 'http://example.com')

在 iframe 中:


// 监听来自父窗口的消息
window.addEventListener('message', function(event) {// 确保消息来自预期的源if (event.origin !== 'http://parent.com') {return}// 处理接收到的消息console.log('Received message from parent:', event.data)
})// 向父窗口发送消息
window.parent.postMessage('Hello from iframe!', 'http://parent.com')

可能会遇到这样的错误:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://192.168.3.24:8080') does not match the recipient window's origin
无法在“DOMWindow”上执行“postMessage”:提供的目标源(“http://192.168.3.24:8080’)与收件人窗口的来源不匹配

这个问题的原因是:使用postMessage时候,iframe页面还未创建,你得在iframe创建之后在使用这些方法。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/158249.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式 之单例模式

单例模式是一种创建型设计模式,它确保一个类只有一个实例,并提供全局访问点,使得该实例可以在程序的任何地方被访问。单例模式经常用于管理共享资源或限制对象创建数量的情况下。 实现一个单例模式需要注意以下几个关键点: 构造…

呼叫中心自建好还是云外呼好用?

传统的呼叫中心在科技的发展下已经被不适用了,都开始使用起智能化的呼叫中心,一个是自建式呼叫中心,一个是云外呼系统。那自建式呼叫中心与云外呼系统的区别有哪些呢? 1、企业自建呼叫中心 劣势 系统维护更新难:自建…

C语言第二十弹--求最大公因数

求最大公因数 最大公因数:也称最大公约数、最大公因子,指两个或多个整数共有约数中最大的一个。 一、穷举法 思路:找到两个数之间的最少值 使用第三接收最小值,然后通过判断两者%n是否同时等于0,同时为0证明就是两者…

安装vue vue-server-renderer报错

安装vue和vue-server-renderer时报错可能有多种原因,以下是一些可能的解决方法: 确认安装了正确的版本:检查您需要安装的Vue版本和Vue-Server-Renderer版本是否匹配,可以在官方文档中查看。 检查网络连接:请确保您的网…

Proxifier联动BurpSuite抓取小程序

直接上软件包 Proxifier安装包https://pan.quark.cn/s/7fb9ad6deb7cProxifier配置文件https://pan.quark.cn/s/049c5f21c97e 无话可说直接操作 1、安装Proxifier步骤可以省略..... 2、将下面文件导入到Proxifier中 3、左上角文件-导入配置文件(因为我已经导入过…

java金额大小写转换/金额转大写/数字金额转换为中文大写金额

文章目录 处理金额问题时,经常需要将数字金额转换为中文大写金额,以下为代码及测试用例。 代码 package com.common.utils.money;import org.apache.commons.lang3.RandomStringUtils; import org.apache.commons.lang3.RandomUtils; import org.apache…

将bitmap转化为1位黑白像素图像(仅保留黑色,其它颜色会删除)

/// <summary> /// 将bitmap转化为1位黑白像素图像(仅保留黑色&#xff0c;其它颜色会删除) /// </summary> /// <param name"bmp"></param> /// <returns></returns> public static Bitmap To1Bit(Bitmap bmp) {Bitmap tmp bm…

C 语言 typedef 关键字

C 语言 typedef 关键字 C 语言提供了 typedef 关键字&#xff0c;您可以使用它来为类型取一个新的有意义的名字。也就是用于重新定义已经存在的变量的名称。 typedef 的语法 typedef <existing_name> <alias_name>在以上语法中&#xff0c;“ **existing_name”…

url最大长度

https://blog.csdn.net/weixin_38673922/article/details/130932457 对于前端作为分享页&#xff0c;或者跳转新页面时&#xff0c;或者做hrbrid 通信&#xff0c;需要用到一系列的参数来处理相对的业务逻辑&#xff0c;那么具体url可以携带多少参数合适&#xff0c;从网上搜索…

【CodeTop】TOP 100 刷题 11-20

文章目录 11. 二叉树的层序遍历题目描述代码与解题思路 12. 搜索旋转排序数组题目描述代码与解题思路 13. 买卖股票的最佳时机题目描述代码和解题思路 14. 岛屿数量题目描述代码与解题思路 15. 环形链表题目描述代码与解题思路 16. 有效的括号题目描述代码与解题思路 17. 合并两…

使用 millis() 函数作为延迟的替代方法(电位器控制延迟时间)

接线图&#xff1a; 代码&#xff1a; unsigned long currentMillis 0; unsigned long previousMillis_LED1 0; unsigned long LED1_delay0; unsigned long previousMillis_LED2 0; unsigned long LED2_delay0; #define LED1 3 #define LED2 9 #define P1 A2 …

动态规划求数组中相邻两数的最小差值( 即相差的绝对值 ) java 实现

算法的核心是&#xff1a;计算当前数和前一个数的差值,用该差值和以前最小的连续数的差值作比较&#xff1b;如果当前的差值更小&#xff0c;则发现了更小的连续数的差值&#xff1b;如果当前的差值更大&#xff0c;则沿用以前的最小连续数差值作为新的最小连续数差值。 MinDif…

python写文件

output_file open(E:/XD_transfer/代码/CNN_new/try.csv, w) output_file.write(Sample, \n) for j in range(5):output_file.write(str(j) \n)

2023亚太杯数学建模思路 - 案例:最短时间生产计划安排

文章目录 0 赛题思路1 模型描述2 实例2.1 问题描述2.2 数学模型2.2.1 模型流程2.2.2 符号约定2.2.3 求解模型 2.3 相关代码2.4 模型求解结果 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 最短时…

HttpClient发送MultipartFile多文件及多参数请求

1、环境准备&#xff1a; <dependency><groupId>commons-httpclient</groupId><artifactId>commons-httpclient</artifactId><version>3.1</version></dependency><dependency><groupId>org.apache.httpcomponent…

关于 win11 系统下12代/13代英特尔大小核架构 CPU 的 VMware 优化:输入延迟、卡顿,大小核调度

关于 win11 系统下12代/13代英特尔大小核架构 CPU 的 VMware 优化&#xff1a;输入延迟、卡顿&#xff0c;大小核调度 一、前言二、VMware 的优化2.1 键鼠输入延迟问题的解决2.1.1 搜索内核隔离2.1.2 关闭内存完整性并重启2.1.3 搜索启用或关闭windows功能2.1.4 关闭 hyper-v 和…

Java中有接口了为什么还需要有抽象类,抽象类和普通类和接口,三者之间有什么区别和联系

在 Java 中&#xff0c;接口、抽象类和普通类都是不同的概念&#xff0c;各自有其特定的用途和特性。了解它们之间的区别和联系有助于更好地利用 Java 的面向对象编程特性。 接口&#xff08;Interface&#xff09; 定义: 接口是一种完全抽象的类&#xff0c;它允许声明方法但…

【23真题】难!下沙“小清华”难度爆增!

今天分享的是23年“下沙小清华”杭州电子科技大学843的信号与系统试题及解析。 本套试卷难度分析&#xff1a;22年杭电843考研真题&#xff0c;我也发布过&#xff0c;若有需要&#xff0c;戳这里自取&#xff01;平均分为112分&#xff0c;最高分为145分&#xff01;该院校23…

Impala VS Hive

Impala和Hive的关系 Impala是基于Hive的大数据实时分析查询引擎&#xff0c;直接使用Hive的元数据库Metadata,意味着impala元数据都存储在Hive的metastore中。并且impala兼容Hive的sql解析&#xff0c;实现了Hive的SQL语义的子集&#xff0c;功能还在不断的完善中。 与Hive的…

如何用CHAT理解数理化?

问CHAT&#xff1a;扇形面积的概念&#xff0c;简单阐述一下。 CHAT回复&#xff1a; 扇形面积是指扇形这种二维几何图形所覆盖的区域大小。 扇形是一个圆的一部分&#xff0c;是由圆心出发的两条射线&#xff08;半径&#xff09;和这两条射线所夹角决定的圆周上的弧线所围成…