iframe跨域消息通信(postMessage和message事件)

已于 2022-07-05 15:57:55 修改
阅读量1.5w 收藏 35
点赞数 8
分类专栏： Html5、JavaScript、ES6 文章标签： javascript 前端 开发语言
于 2021-01-16 10:49:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbiao68/article/details/112693419
版权

文章目录

一、文章参考

  1. IFrame消息传递
  2. 使用 iframe + postMessage 实现跨域通信

二、知识点

  1. 页面需要监听 message 事件，window.addEventListener(“message”, dealMessage, false);

  2. 父页面向子iframe页面发送消息：

document.getElementById("mapIframe").contentWindow.postMessage("父页面向子页面发送消息", "*");
或者
document.getElementById("mapIframe").contentWindow.postMessage("父页面给子页面发送信息", "http://10.192.195.166:56225/son.html");

  1. 子iframe页面向父页面发送消息：

window.parent.postMessage('子页面向父页面发送消息','*');

三、例子说明

  1. 父页面
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>我是父亲页面</div>
    <button onclick="parentMsgToSon()">父页面给子页面发送信息</button>
    <!-- <iframe
      id="mapIframe"
      src="http://127.0.0.1:9999/son.html"
      style="width: 500px; height: 500px"
    ></iframe> -->
    <iframe
      id="mapIframe"
      src="http://10.192.195.166:54473/son.html"
      style="width: 500px; height: 500px"
    ></iframe>
  </body>
  <script>
    // 父页面向子页面发送消息
    function parentMsgToSon() {
      document.getElementById("mapIframe").contentWindow.postMessage("父页面向子页面发送消息", "*");
    }
    // 监听子页面的消息
    if (typeof window.addEventListener != "undefined") {
      // for ie9+、chrome
      window.addEventListener("message", dealMessage, false);
    } else if (typeof window.attachEvent != "undefined") {
      // for ie8-
      window.attachEvent("onmessage", dealMessage);
    }
    // 处理消息的回调函数
    function dealMessage(e) {
      console.log(e.data);
    }
  </script>
</html>
  1. 子页面
<!DOCTYPE html>
<html lang="en">
<body>
  <div>我是子页面</div>
  <button onclick="sendMsgToParent()">子页面给父页面发送信息</button>
</body>
<script>
  // 向iframe父页面发送消息
  function sendMsgToParent() {
    window.parent.postMessage('子页面向父页面发送消息', '*');
  }
  // 监听消息
  if (typeof window.addEventListener != 'undefined') {      // for ie9+、chrome
    window.addEventListener('message', dealMessage, false);
  } else if (typeof window.attachEvent != 'undefined') {   // for ie8-
    window.attachEvent('onmessage', dealMessage);
  }
  // 监听消息的回调函数
  function dealMessage(e) {
    console.log(e.data);
  }
</script>
</html>

3.1 能不能使用非message事件？

不能，否则起不到效果

四、通信的前提是iframe 加载完成

4.1 问题描述

在工作中，由于iframe的地址src 是变动的，于是，自己在写代码的时候，iframe一旦变化之后就立马向iframe发送消息，一直到不到预期的效果，但是技术路线好像又没有问题，经过反复调试和代码审查发现，是由于iframe 里面的代码还没有加载完成就发送消息，导致iframe 子页面没有处理消息信息的逻辑

4.2 解决办法，iframe 添加 onload 事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="test()">改变</button>
  <iframe id="aaa" src="https://www.baidu.com" onload="iframeLoad()"></iframe>
</body>
</html>
<script>
console.log('start')
function iframeLoad () {
  console.log('load')
  alert('页面加载完成')
}
console.log('end')

function test () {
  document.getElementById('aaa').src = 'http://hui.dev.hikhub.net/zh/form/input.html#%E5%A4%8D%E5%90%88%E5%9E%8B%E8%BE%93%E5%85%A5%E6%A1%86'
}
</script>
胖鹅68
关注
  • 8
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
21、消息事件(message Event)
leyoliu的博客
09-09 2407
消息事件（Message events）是引用已命名消息的事件。一条消息有一个名称和一个有效负载。与信号不同，消息事件总是指向单个收件人。消息事件定义是通过使用messageEventDefinition元素声明的。 假设在线订餐平台分为微信小程序订餐，支付宝小程序订餐，微信订餐支持微信支付，支付宝订餐支持支付宝支付。付款流程设置两个信号事件，在处理订单任务中根据订餐端的类型启动不同支付流程。设置为user task，assignee=xiaoming，增加一个表单字段设置订餐的终端类型，枚举类型 普通se
关于iframe跨域使用postMessage的实现
01-21
当我们要在域名A.com下使用一个域名B.com提供的页面服务，直觉想到的实现方式就是使用iframe。但是iframe直接的交互存在**跨域问题**，目前看来解决方式有两种。一是使用nginx代理转发，在域名A的nginx上配置指定的转发规则，直接指向域名B，直接干掉了跨域；另一种方式是使用postMessage方法。此处针对第二种方式，看下使用方式和可能的问题。 postMessage是什么 此处引用MDN关于postMessage的详细说明。简而言之就是：postMessage是挂载在window下的一个方法，用于不同域名下的两个页面的信息交互，父子页面通过postMessage（）发送
iframe通信——postMessage
最新发布
m0_72791534的博客
06-25 1559
postMessage是HTML5中新引入的API，它可以实现跨窗口以及跨域的通信。postMessage类似与Ajax但是它不受同源策略的限制并且通信双方都是客户端。本文的目的就是验证下这种跨页面通信方法的使用流程。
iframe 的基本介绍与使用
不知道并不可怕，可怕的是自己不知道 “自己不知道”。
04-15 2530
iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用<iframe>标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。
iframe+postMessage跨域通信
qq_41742961的博客
01-15 257
场景：（单点登录）从应用平台登录成功后，点击系统图标跳转到对应系统的首页 实现方式：在A系统写入iframe，应用平台点击按钮后跳转A体统（window.open），加载A系统的代码，当A体统中的iframe.onload加载完毕后，通知平台已经加载完毕(ifram.content.postMessage),可以给我发送token了，对应平台应该添加一个监听事件接收ifram发送来的消息，(widown.addEventListioner),并且平台拿到消息后将token发送给ifame，对应iframe也
iframe跨域通信传递数据笔记 postMessage
kfepiza的博客
12-12 4006
文章目录前言一、iframe的window二、上级向iframe传值1.用 postMessage2.XX三、postMessage("发送的消息","域名*代表全部 ");1.postMessage是window下的方法2.语法从被传值目标的window对象调用postMessage(参数1,参数2,参3一般省略)参数1:messageData参数2:targetOrigin目标域名 , "*"代表所有参数3:是一个Transferable 对象 可无3. postMessage的特殊性, 可以跨越调用
[前端] iframe及postMessage使用解析
热门推荐
网站前端/PHP/Android/其他
08-27 1万+
这篇主要讲iframe标签，对于frameset、frame、noframe标签就不讲了，因为在h5中已经不支持了。 一、iframe标签介绍： <iframe> 标签规定一个内联框架。 一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 二、iframe标签兼容： <iframe src="page_two.html" name="ifram...
使用 postMessage 解决 iframe 跨域通信问题
喜洋杨
04-07 4030
是挂载在window对象上的，所以等iframe加载完毕后，用iFrame.contentWindow获取到iframe的window对象，然后调用postMessage方法，相当于给子页面发送了一条消息。postMessage方法第二个参数可以设置要发送到哪个url，如果当前子页面的url和设置的不一致，则会发送失败，我们设置为*，代表所有url都允许发送。总结：所谓的跨窗口发送消息，就是通过在别的窗口操作本窗口发送消息，然后本窗口再自己接收的方式实现。首先我们模拟场景，假设有两个不同源的页面，
【安全与协议】使用 iframe + postMessage 实现跨域通信
Umbrella_Um的博客
06-23 821
在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面，这时第一反应是使用 iframe，但是产品又提出在 a.com 中操作，b.com 中进行显示，或者相反。 1、postMessage postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。 语法： otherWindow.postMessage(message, targetOrigin, [transfer]) otherWindow：其他窗口的引用，如 iframe的
详解使用postMessage解决iframe跨域通信问题
12-13
总的来说，`postMessage`是现代Web开发中解决跨域通信问题的一个强大工具，它简化了iframe和其他窗口之间的交互。熟练掌握`postMessage`的使用，可以极大地提升跨域应用的用户体验和功能实现。在实际应用中，根据...
iframeMessage
04-13
iframeMessage 用于跨域传值 技术 postMessage 引入 [removed][removed] 使用 var iframeId = new iframeMessage("节点id","要通信的域"); //接收的值 iframeId.addEventListener(function(e){ console.log(e);//接收的参数 let { id,msg,label,tag} = e;//其中tag不传时就不会存在 }) //传递参数 iframeId.postMessage({ id:id,//要传递的id msg:msg,//要传递的内容 可以传Object label:label,//要传递的label tag:tag//要传递的tag }) 实例化 ne
postmessage解决iframe页面跨域
10-19
通过JS技术解决引入iframe页面引起的跨域问题，postmessage解决iframe页面跨域问题
js跨域iframepostMessage提交表单
08-11
利用iframe对form表单（含文件上传）进行跨任何域提交，无刷新且可以返回值
详解html5 postMessage解决跨域通信的问题
01-19
本文介绍了详解html5 postMessage解决跨域通信的问题，分享给大家，具体如下： 效果图 postmessage解析HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin, ...
html5通过postMessage进行跨域通信的方法
09-27
本文将深入探讨`postMessage`的工作原理及其在跨域通信中的应用。 `postMessage`方法的基本语法如下： ```javascript otherWindow.postMessage(message, targetOrigin, [transfer]); ``` - `otherWindow`：是要...
postMessage 通信 | Iframe 通信
然后他就拿棍子来打我
01-30 1390
父级判断 Iframe 是否有效，且只有 Iframe 加载完毕后才能成功传递 message。
iframe跨域消息传递
qq_30895747的博客
05-17 1341
跨域通信
vue页面内嵌iframe使用postMessage进行数据交互（postMessage跨域通信）
weixin_47941995的博客
05-04 501
是html5引入的API,它允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.vue父页面（嵌入iframe的页面）在vue中要使用iframe上的postMessage,首先应该获取到iframe实例，有以下几种方式width:100%;margin:0;border:0;将iframe的window窗体存储至data对象中会出现跨域报错。
postMessage解决iframe跨域通信
07-22
在 Web 开发中，当网页中包含来自不同域名的 iframe（内嵌框架）时，由于浏览器的同源策略限制，iframe 之间的直接通信会受到限制。为了实现 iframe 之间的跨域通信，可以使用 postMessage 方法。 postMessage 是一种 HTML5 提供的跨文档消息传递机制，它允许在不同窗口或 iframe 之间发送消息。通过 postMessage，可以在不同域名之间进行安全的双向通信。 使用 postMessage 进行跨域通信的步骤如下： 1. 在发送消息的页面（发送方）中，使用 JavaScript 调用 postMessage 方法发送消息。该方法接受两个参数：要发送的消息和接收消息的目标窗口的源（origin）。目标窗口的源可以是具体的域名、协议和端口号，或者是通配符 "*" 表示任意源。 ```javascript var targetWindow = document.getElementById('target-frame').contentWindow; targetWindow.postMessage('Hello', 'https://target-domain.com'); ``` 2. 在接收消息的页面（接收方）中，监听 message 事件，通过 event.data 获取接收到的消息。在事件处理程序中可以对消息进行处理。 ```javascript window.addEventListener('message', function(event) { if (event.origin === 'https://source-domain.com') { console.log('Received message: ' + event.data); } }); ``` 通过这种方式，发送方和接收方可以进行跨域通信，并且可以在消息中传递复杂的数据结构。但要注意，为了确保安全性，应该在接收方对来自不同源的消息进行验证，以防止恶意代码的攻击。 需要注意的是，postMessage 方法只能在现代浏览器中使用，兼容性可能会有所差异。此外，在使用 postMessage 进行跨域通信时，也需要确保目标窗口（接收方）支持 postMessage 方法。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值