文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

使用 WebSocket 实现跨域 iframe 通信

宫崎骏风-罗罗诺亚·索隆前言本文是使用 WebSocket 实现跨域 iframe 通信思路实现了一个本地 Demo，功能有：iframe 页面之间互相通信嵌套的 iframe 通信WebSocket...客户端与服务端通信Demo预览效果由于完整流程操作录制的Gif图片为306M，上传图片发现掘金有限制，图片体积不能超过20M，静态图附上页面布局整体运行效果都是在本地运行的，启动了3个前端服务页面，分别是...8090,8091,8092屏幕主页面是8090服务运行的，有两个卡片区可以向其他两个页面进行通信页面中使用iframe嵌入了8091和8092的页面，分别是这两个卡片区，嵌入的卡片页也可以分别向其他两个页面进行数据通信代码思路实现目录结构这是本地...id="iframe1" src="http://localhost:8091">iframe> iframe id...="iframe2" src="http://localhost:8092">iframe> 在页面初始化后进行 WebSocket 进行连接，然后使用 onmessage

95710

iframe+postMessage实现跨域通信

考虑到两个系统是不同的端口号，存在跨域问题，这时发现HTML5新增了一个API-window.postMessage()，于是就决定用iframe结合window.postMessage()实现 在页面中嵌入一个...iframe，将图片管理系统嵌入到当前的管理系统中，结合window.postMessage()实现跨域通信 项目背景 该管理系统基于React.js搭建，在此简称为A页面，地址为http://www.blogoog.com...在页面内嵌入iframe页面的情况下，需要等到页面内的iframe页面，也就是B页面加载完成之后，才能进行postMessage跨域通信 event.origin中的origin不能保证是该窗口的当前origin...始终是你需要通信的目标窗口 A页面中：A页面向B页面发送跨域信息，window就是在A页面中嵌入的iframe指向的B页面的window，即：iframe.contentWindow B页面中：B页面想...，再进行postMessage跨域通信 一定要对origin做判断，去掉不是来自我们目标窗口的origin，防止来自其他origin的攻击 着重注意window.postMessage()中window

6K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    详解使用postMessage解决iframe跨域通信问题

    第一时间想到的就是用iframe了，但问题来了，我和第三方web项目是有交互的，这就违反同源策略了，处理跨域问题是最让人头疼的事之一。...需求是这样的，在我的页面点击一些按钮，要实时反馈到iframe子页面，子页面再进行响应。 当时脑子里第一时间想到的解决方案是：用NGINX把两个项目代理到同一域名下。...但这样似乎有点小题大做了，有没有更方便快捷的方法呢？ 在window对象下有个postMessage方法，是专门用来解决跨域通信问题的。...关于postMessage的详细介绍请戳这里，不过MDN的文档太详细了，导致有些同学看完还是一脸懵逼，下面我们就来看看怎么用postMessage实现iframe跨域通信，当你会用了之后再回去看文档，感觉是完全不同的...是无法通信，因为它们是不同源的（假设存在跨域问题），这时候就要用到postMessage了。

    5.8K21

    基于iframe的跨域与更新父窗体地址栏的解决方案

    但有一个前提，src和你的父窗口的地址必须是同源的，也就是不能跨域。 但实际上管理平台的页面和运维平台的页面并不是同源的，所以首先要解决的是跨域问题。...解决跨域的方法有很多种，这里由于管理平台的主域是“oa.com”，运维平台的主域也是“oa.com”，所以采用document.domain来跨域。...以虚拟机模块的代码为例，由于从虚拟机页面还有可能跳转到母机模块，这里也要考虑到： 图片1.png 如果是在获取到子窗体的src后，以window.location.href = xxx;的方式来修改父窗体...这样每次iframe内部的src发生变化后，都会相应修改父窗体的地址栏，但又不会去刷新当前页面，效果上看起来就像是在自己的页面中操作，感受不到跨站点的问题。...3.2.2常见的跨域方法 本文主要是在一个具体问题中，根据问题的具体情况，采用了document.domain的方式解决跨域问题，其他跨域的方法，诸如图像Ping、JSONP、window.name、

    15.4K1350

    实现iframe父窗体与子窗体的通信

    本文主要会介绍如何基于MessengerJS，实现iframe父窗体与子窗体间的通信，传递数据信息。同时本文会提供一个可运行的实例代码，实现在父窗体中，获取到来自子窗体的数据的效果。...1.采用方案 1.1 MessengerJS方案 可以采用MessengerJS方案，该方案可以实现父窗体与iframe之间的通信、多个iframe之间的通信。...不过要前提是要确保对不同域的页面有修改权限，并且父窗体、子窗体页面都要同时加载这个MessengerJS。...对象的名字： // 父窗口中 - 添加消息对象, 明确告诉父窗口iframe的window引用与名字 messenger.addTarget(iframe1.contentWindow, 'iframe1...的名字和消息，例如父窗体要给子窗体发消息：  // 父窗口中 - 向单个iframe发消息  messenger.targets['iframe1'].send(msg1);  messenger.targets

    10.7K771

    跨 Tab 窗口通信是如何实现的

    基于跨窗口通信的弹弹球： 基于跨窗口通信的 Flippy Bird： 我也尝试制作了一个跨 Tab 窗口的 CSS 动画联动，效果如下： 代码不多，核心代码 200 行，感兴趣的可以戳这里：Github...') 创建了一个 SharedWorker ， 后面每一个被打开的同域浏览器 TAB 页面，都是共享这个 Worker 线程，从而实现跨页面通信 基于 worker.port.postMessage(data...兼容性方面，到今天(2023-11-26)，broadcast Channel 看着是兼容性更好的方式： 方式三：localStorage/sessionStorage OK，最后一种跨 Tab 窗口通信的方式是利用...总而言之，跨 Tab 窗口通信应用在实际应用的过程中，我们需要思考更多可能隐藏的问题。...跨 Tab 窗口通信应用场景 当然，除了最近大火的跨 Tab 动画应用场景，实际业务中，还有许多场景是它可以发挥作用的。这些场景利用了跨 Tab 通信技术，增强了用户体验并提供了更丰富的功能。

    93110

    不同页面通信与跨域

    如果我们用服务器打开，我们的不同tab页面通信完成了，而且是实时的。 2. 玩转iframe 我们都知道frame可以跨域，那么我们来试一下。...下面例子，都是一个html内嵌iframe，当然你直接打开iframe那个文件，没什么意义的 2.1 利用hash变化传递信息实现父子窗口通信（能跨域） 父窗口：1.html html: iframe...，只能服务器打开 2.3 window.name （能跨域） 类似于vue、react的prop父子传值，只要在父窗口设置iframe标签的name，在子窗口就可以读到。...前面我们已经知道，iframe能跨域，localstorage能使得两个tab页面通信。那我们就来试一下，iframe桥接两个互不相干的tab页面。...加上websocket的话，还可以非同源聊天呢，其他的可以自己随意设置了。 从1到2的信息实时传递更新就这样子成功了，反之亦然。 4.MessageChannel 顾名思义，信息通道。

    2.3K10

    不同页面通信与跨域0. 前言1. localstorage2. 玩转iframe3. 非同域的两个tab页面通信4.MessageChannel

    如果我们用服务器打开，我们的不同tab页面通信完成了，而且是实时的。 2. 玩转iframe 我们都知道frame可以跨域，那么我们来试一下。...下面例子，都是一个html内嵌iframe，当然你直接打开iframe那个文件，没什么意义的 2.1 利用hash变化传递信息实现父子窗口通信（能跨域） 父窗口：1.html html: iframe...，只能服务器打开 2.3 window.name （能跨域） 类似于vue、react的prop父子传值，只要在父窗口设置iframe标签的name，在子窗口就可以读到。...前面我们已经知道，iframe能跨域，localstorage能使得两个tab页面通信。那我们就来试一下，iframe桥接两个互不相干的tab页面。...加上websocket的话，还可以非同源聊天呢，其他的可以自己随意设置了。 ? 从1到2的信息实时传递更新就这样子成功了，反之亦然。 4.MessageChannel 顾名思义，信息通道。

    5.1K20

    window.postMessage和window.dispatchEvent的区别

    以下是它们的详细对比： 1. postMessage postMessage 是用于 跨文档通信 的机制，主要用于在不同窗口、iframe 或不同域之间传递消息。...特点： 跨域支持：postMessage 是 HTML5 提供的标准 API，专门用于解决跨域通信问题。它可以在不同源（不同协议、域名或端口）的窗口或 iframe 之间安全地传递消息。...安全性：postMessage 支持指定消息的来源（origin），接收方可以通过 event.origin 验证消息的来源是否可信。 使用场景： 在 iframe 和父页面之间通信。...主要区别 特性postMessagewindow.dispatchEvent跨域支持支持跨域通信仅支持同一文档内通信目标窗口需要明确指定目标窗口（如 iframe）在当前窗口内触发，无需指定目标数据传递可以传递结构化数据...（字符串、对象等）通过 event.detail 传递数据事件冒泡不支持事件冒泡支持事件冒泡安全性支持验证消息来源（event.origin）无内置的跨域安全机制使用场景跨窗口、跨域通信单文档内组件通信

    84410

    Web前端学习笔记之前端跨域知识总结

    0x01 什么是跨域 跨域一词从字面意思看，就是跨域名嘛，但实际上跨域的范围绝对不止那么狭隘。具体概念如下：只要协议、域名、端口有任何一个不同，都被当作是不同的域。...0x03 通过location.hash跨域 因为父窗口可以对iframe进行URL读写，iframe也可以读写父窗口的URL，URL有一部分被称为hash，就是#号及其后面的字符，它一般用于浏览器锚点定位...传送数据到a.html，由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于父窗口域名下的一个代理iframe b.html下创建一个隐藏的...0x05 通过jsonp跨域 刚才说的这几种都是双向通信的，即两个iframe，页面与iframe或是页面与页面之间的，下面说几种单项跨域的（一般用来获取数据），因为通过script标签引入的js是不受同源策略的限制的...这种方法与 document.domain 方法相比，放宽了域名后缀要相同的限制，可以从任意页面获取 string 类型的数据 0x08 后记 其它诸如中间件跨域，服务器代理跨域，Flash URLLoader

    1.5K30

    前端跨了个域

    iframe 跨域 在使用上来说，iframe 跨域是比较麻烦的一种（创建新元素 -> 处理跨域交互），但是伟大的邓小平同志说过： 不管是黑猫还是白猫，只要能抓住老鼠，就是好猫。...location.hash 一个页面和从属于它的 iframe 之间可以互相读取和修改 URL，但还是有一定的前提：父窗口对子窗口进行 url 的读写时，随意；子窗口对父窗口的 url 进行读写时，受到同源策略的限制...所以在这种情况下，子窗口需要借助一个“代理窗口”去修改父窗口的 url。 通信的交互过程如上。 接下来再讨论为什么 hash 可以实现传递数据的需求。...事件拿到对应的数据 postMessage 这个方法就比较简洁明了：父窗口和子窗口都可以作为数据的发送方和接收方，且不需要考虑是否同源。...后端返回的不是纯数据，而是用前端告知的函数名包裹数据，传递到前端以后也就变成了一段可执行的 js 代码 CORS 跨域 CORS（Cross Origin Resource Sharing）的中心思想是

    80720

    除了JSONP，还有哪些常用的跨域解决方案？

    在现代Web开发中，跨域资源共享（CORS）已成为主流的跨域解决方案，同时还有其他多种技术可以根据具体场景选择使用。以下是常见的跨域解决方案及其特点：1....需要后端配合：返回包裹在回调函数中的JSON数据。3. 代理服务器（Proxy Server）原理：在同源域名下部署一个后端服务，作为中间层转发请求到目标服务器。...（如iframe、window.open）的跨域通信。...示例（父窗口→iframe）：// 父窗口const iframe = document.querySelector('iframe');iframe.contentWindow.postMessage...实时通信：使用WebSocket。窗口间通信：使用postMessage。根据具体场景选择合适的方案，通常CORS和代理服务器是最常用的解决方案。

    24910

    Web中的窗口通讯方式及使用(postMessageMessageChannelBroadcastChannel)

    前言 三种常用的跨窗口通信技术：postMessage、MessageChannel 和 BroadcastChannel。 它们分别适用于不同的通信场景，并提供了灵活的通信机制。...postMessage 是基本的窗口间通信机制，适用于不同窗口之间的单向通信，也可以在跨域通信和与 Web Worker 之间的通信中使用。...BroadcastChannel 实现了实时消息广播机制，适用于在同一域名下的多个窗口、标签页或 iframe 之间进行实时消息广播。 怎么选择 如果是跨域之间的交互只能是postMessage。...从 Safari 14 开始，Safari 浏览器已经开始支持跨域的 postMessage 方法。...这意味着你可以使用 postMessage 方法在不同域下的 Safari 浏览器中进行跨文档通信。 内页发送到主页 主页 <!

    3.5K10

    vivo 商品中台的可视化微前端实践

    看到这，小伙伴可能会有以下疑问： iframe 和父窗口的数据通信是通过 postMessage 完成的，这里为什么不使用 postMessage 呢？...有以下缺点： 父窗口含有大量逻辑：父窗口需要将 vuex 的数据进行处理，然后通过 postMessage 进行传输； 数据通信方式不纯粹：vuex 和 postMessage 组合在一起，互相转换，使数据通信更加复杂和难以控制...而我们通过 uni-render ，让父窗口和 iframe 子窗口的数据通信不再需要 postMessage ，同时只使用 vue 生态中的 vuex 做数据通信。...5.2.1 uni-render 相遇 qiankun 跨域问题 现象：项目接入主应用，uni-render 控制的预览页面空白，控制台报跨域错误。...原因：iframe 预览页面为商品中台域名，而子应用接入主应用后为主应用域名，从而导致跨域。

    1.5K50

    鸿蒙ArkUI-X 跨平台通信：从入土到复活

    前言 话说前两天刚调研了 ArkUI-X 跨平台方案，最终卡死在了跨平台和 native 通信上，文章在这里鸿蒙跨平台 ArkUI-X从入门到入土[1]，今天在社区的帮助下跑通了通信方案，该挖出来复活了...官方在 Android 侧提供了一个抽象类BridgePlugin，我们需要继承它实现一些方法来进行通信。在 ArkUI-X 侧同样提供了'@arkui-x.bridge包来进行通信。...jsCallMethod，在jsCallMethod中首先调用findMethod方法从methodsMap_中获取对应的方法，找了则直接调用。...没找到则反射获取 BridgePlugin 实现类中的方法，然后使用方法名做匹配，找到对应的方法。到这里也就解释了为啥不支持方法重载。也解释了为啥方法参数对应不上会有异常。...---- 参考资料 [1] 鸿蒙跨平台 ArkUI-X从入门到入土: https://juejin.cn/post/7327910163628294154 [2] 平台桥接开发指南: https:/

    2.4K10

    前端 | 解决跨域问题方案

    把ui所在的服务器和跨域服务器都用nginx代理转发，浏览器访问nginx，nginx到ui服务获取ui，再把ui下载到浏览器，浏览器发起ui中的URL，该URL为Nginx封装后的跨域服务器的URL或...注意 document.domain限制：虽然可读写，但只能设置成自身或者是高一级的父域且主域必须相同。所以只能解决一级域名相同二级域名不同的跨域问题。...document.domain只适用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 无法通过这种方法跨域。...场景 分析 父窗口和iframe的子窗口之间通讯或者是window.open打开的子窗口之间的通讯。...同样子窗口也可以向父窗口传递数据 postMessage方法跨域 场景 分析 场景1:在a页面里打开了另一个不同源的页面b，你想要让a和b两个页面互相通信。

    1.1K00

    同源策略和跨域解决方法

    DOM、父窗口拿到iframe的DOM。...如：父窗口是http://a.test.com，iframe是http://test.com；当设置了document.domain="test.com"时，就能进行跨域了。...改变片段识别符，页面不会重新刷新 父窗口将信息，写入子窗口片段识别符；子窗口通过监听hashchange事件得到通知 5.window.postMessage：HTML5为了解决跨域问题，引进的全新API...：跨文档通信API（cross-document messaging） 父窗口：http://a.com，子窗口：http://b.com；显然两者不同源，但是通过postMessage两者可以实现跨域通信...它们之间的连接是持续打开的数据通道，就好比是打电话！ 而websocket不受同源策略制约，可以用来跨域通信。将可以通信的域名放在白名单里。

    2.4K70
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券