当前位置: 首页 > news >正文

js 不同域iframe 与父页面消息通信

不同域iframe 与父页面消息通信

  • 💡访问 iframe 页面中的方法
  • 💡跨文本消息
    • 监听消息
    • 发送消息

var iframe = document.getElementById("myIframe");
var iframeWindow = iframe.contentWindow;

💡访问 iframe 页面中的方法

iframeWindow.methodName();

其中,methodName 为 iframe 页面中定义的方法名。需要注意的是,父页面和 iframe 页面必须同源(即协议、域名和端口号相同)才能访问彼此的方法。如果两个页面不同源,则会出现跨域问题,无法相互访问。

💡跨文本消息

跨文档消息(Cross-document Messaging):使用postMessage API,在父页面和iframe之间进行消息通信。这样可以安全地在不同域之间传递数据,但需要在父页面和iframe中编写消息监听和处理的逻辑。

监听消息

💡在父页面中添加消息监听器,监听来自iframe的消息:

window.addEventListener("message", function(event) {  // 判断消息来源是否为iframe  if (event.source !== iframe.contentWindow) {  return;  }  // 处理接收到的消息  console.log(event.data);  
}, false);

💡在iframe页面中添加消息监听器,监听来自父页面的消息:

window.addEventListener("message", function(event) {  // 判断消息来源是否为父页面  if (event.source !== parent.window) {  return;  }  // 处理接收到的消息  console.log(event.data);  
}, false);

发送消息

💡在父页面中向iframe发送消息

iframe.contentWindow.postMessage("Hello, iframe!", "https://example.com");

💡在iframe页面中向父页面发送消息

parent.window.postMessage("Hello, parent!", "https://example.com");

其中,postMessage方法的第一个参数为要发送的消息,第二个参数为接收消息的域(目标页面的window.location.href),用于验证消息来源的安全性。需要注意的是,在使用postMessage进行消息通信时,需要确保父页面和iframe的通信协议和消息格式的定义一致,以避免出现通信失败或数据解析错误等问题。

http://www.lryc.cn/news/167506.html

相关文章:

  • c++ vs2019 cpp20规范 模板function 源码解析
  • 点云从入门到精通技术详解100篇-从全局到局部的三维点云细节差异分析(下)
  • 微信小程序中 vant weapp 使用外部的icon作为图标的步骤
  • [npm]脚手架本地全局安装1
  • 2023学习计划
  • 网络编程(一):服务器模型、Java I/O模型、Reactor事件处理模型、I/O复用
  • flyway适配高斯数据库
  • LVS keepalived实现高可用负载群集
  • HTTP RESTFul RPC
  • 短视频seo矩阵系统源码开发搭建--代用户发布视频能力
  • 真实的产品开发中,后端的设计规约可以写哪些
  • Pytorch 多卡并行(2)—— 使用 torchrun 进行容错处理
  • Java异常处理(详解)
  • 嵌入式-数据进制之间的转换
  • 腾讯mini项目-【指标监控服务重构】2023-08-20
  • 智能文本纠错API的应用与工作原理解析
  • 在springboot下将mybatis升级为mybatis-plus
  • Vuex详解:Vue.js的状态管理方案
  • 栈与队列经典题目——用队列实现栈
  • Python stomp 发送消息无法显示文本
  • postgresql-视图
  • 科技资讯|Vision Pro头显无损音频仅限USB-C AirPods Pro 2耳机
  • Postman应用——初步了解postman
  • 分析报告显示,PHP是编程语言主力军,且在电商领域占据“统治地位”
  • 关于Greenplum Platform Extension Framework(PXF)
  • 编程获取图像中的圆半径
  • 什么是Scrum?如何实施Scrum(敏捷开发)以及敏捷工具
  • 提升运营效率:仓储可视化的实时监控与优化
  • 代理模式和单一职责原理一文读懂(设计模式与开发实践 P6)
  • Linux网络编程|TCP编程