0

0

Javascript如何进行跨域通信?

狼影

狼影

发布时间:2025-12-17 12:29:05

|

158人浏览过

|

来源于php中文网

原创

javascript跨域通信的核心方法是postmessage,它安全、标准、兼容ie8+,适用于iframe、弹窗、web worker等双向实时通信场景;其他方式如cors、jsonp主要用于单向数据请求。

javascript如何进行跨域通信?

JavaScript 跨域通信的核心方法是 postMessage,它安全、标准、兼容性好(IE8+),适用于 iframe、弹窗、Web Worker 等场景。其他方式如 CORS、JSONP、代理等主要用于请求数据,而非“通信”——即双向、实时、上下文可控的消息交互。

用 postMessage 实现 iframe 跨域通信

父页面与嵌入的跨域 iframe 可通过 window.postMessage() 发送消息,并用 message 事件监听响应。

  • 发送方调用 iframe.contentWindow.postMessage(data, targetOrigin)targetOrigin 必须写具体协议+域名(如 "https://example.com"),不可用 "*"(除非完全信任)
  • 接收方需在 window.addEventListener('message', handler) 中校验 event.originevent.source,防止伪造来源
  • 消息体 data 会自动序列化(仅支持可结构化克隆的对象,不支持函数、DOM 节点等)

弹窗(window.open)间的跨域通信

父页面打开跨域子窗口后,可保存其引用(const child = window.open(...)),后续用 child.postMessage() 发送;子窗口可通过 window.opener 向父页发消息。

  • 子窗口首次发消息前,需确保父页已监听 message 事件(可加简单重试或 ready 信号)
  • 关闭前建议清理监听器(removeEventListener),避免内存泄漏
  • 注意:Safari 对弹窗的 window.opener 有严格限制(尤其隐私模式),需降级处理

配合 MessageChannel 实现更精细的通信通道

当需要多个独立、双向、低耦合的通信流(例如多个 iframe 或 worker),可用 MessageChannel 创建端对端通道。

易优cms包装印刷厂网站源码1.7.1
易优cms包装印刷厂网站源码1.7.1

包装印刷厂网站源码适合印刷公司、图文门店、打印店进行区域业务拓展.通过网站展示业务,如特惠印刷楼书,纸杯,报纸书刊,画册,手提袋,信纸信封,海报,户型单,宣传单,等各种印刷品进行区域业务拓展,方便客户找到厂家。 易优cms包装印刷厂网站源码是基于易优cms开发,包含电脑端及移动端,如果需要小程序的话可以购买易优cms小程序插件,网站安装搭建简单,方便运营维护。

下载

立即学习Java免费学习笔记(深入)”;

  • 创建后得到两个 MessagePort 对象,分别传给通信双方(通过 postMessage(port, [port])
  • 任一端调用 port.postMessage(),另一端监听 port.onmessage 即可,无需校验 origin
  • 适合高频、模块化通信,但需手动管理端口启停(port.start()port.close()

注意事项与常见坑

跨域通信不是万能的,安全和健壮性必须前置考虑。

  • 永远验证 event.origin,不只看域名,还要核对协议(https vs http
  • 避免在 message 回调中直接操作 DOM 或执行高耗时逻辑,必要时用 setTimeoutqueueMicrotask
  • iframe 加载完成前调用 contentWindow.postMessage 会失败,应监听 load 事件后再通信
  • 移动端 WebView(如微信内嵌)对 postMessage 支持良好,但部分老 Android WebKit 有 bug,建议加 try-catch

基本上就这些。真正用起来不复杂,但容易忽略 origin 校验和加载时机,导致调试困难或安全风险。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

547

2023.09.20

DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

3746

2024.08.14

android开发三大框架
android开发三大框架

android开发三大框架是XUtil框架、volley框架、ImageLoader框架。本专题为大家提供android开发三大框架相关的各种文章、以及下载和课程。

315

2023.08.14

android是什么系统
android是什么系统

Android是一种功能强大、灵活可定制、应用丰富、多任务处理能力强、兼容性好、网络连接能力强的操作系统。本专题为大家提供android相关的文章、下载、课程内容,供大家免费下载体验。

1790

2023.08.22

android权限限制怎么解开
android权限限制怎么解开

android权限限制可以使用Root权限、第三方权限管理应用程序、ADB命令和Xposed框架解开。详细介绍:1、Root权限,通过获取Root权限,用户可以解锁所有权限,并对系统进行自定义和修改;2、第三方权限管理应用程序,用户可以轻松地控制和管理应用程序的权限;3、ADB命令,用户可以在设备上执行各种操作,包括解锁权限;4、Xposed框架,用户可以在不修改系统文件的情况下修改应用程序的行为和权限。

2084

2023.09.19

android重启应用的方法有哪些
android重启应用的方法有哪些

android重启应用有通过Intent、PendingIntent、系统服务、Runtime等方法。本专题为大家提供Android相关的文章、下载、课程内容,供大家免费下载体验。

279

2023.10.18

Android语音播放功能实现方法
Android语音播放功能实现方法

实现方法有使用MediaPlayer实现、使用SoundPool实现两种。可以根据具体的需求选择适合的方法进行实现。想了解更多语音播放的相关内容,可以阅读本专题下面的文章。

375

2024.03.01

http500解决方法
http500解决方法

http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

465

2023.11.09

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

145

2026.02.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号