iframe 给嵌入的 vue页面发送数据（vue2、vue3 都ok）

最新推荐文章于 2024-06-24 16:15:07 发布

NorthCastle

最新推荐文章于 2024-06-24 16:15:07 发布

阅读量451

点赞数

分类专栏： JavaWeb 前端文章标签： vue.js javascript iframe嵌入vue iframe 通讯

本文链接：https://blog.csdn.net/qq_39505245/article/details/134161844

版权

JavaWeb 前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

需求描述

1.有一个网页A，还有一个vue项目B
2.网页A中 使用 iframe 的方式引入了vue项目B
3.现在需要在网页A中 给 vue项目B 发送消息，让vue项目B 做出响应动作。

案例代码

iframe 端

这就是一个普通的网页

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>测试iframe 给 vue项目发送消息</title>
    <script>
        function sendMsg(){
            console.log('发送数据 begin ')
            // 获取到iframe 对象
            var iframe = document.getElementById('abcframe');
            // 封装要发送的数据
            var data = {
                    msg: 'xxx'
                };
            // 执行发送 ： 主要后面的这个域名地址，如果有端口的话，需要包含端口号！
            iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.abc.com:1234');
            console.log('发送数据 end ')

        }
    </script>
  </head>
  <body>
    <!-- 测试按钮 -->
    <button onclick="sendMsg()">点我试试</button>
    <br><br>
    <!-- 嵌入的 iframe 链接 -->
    <iframe id="abcframe" src="http://www.abc.com:1234/aa/bb/cc" ></iframe>
  </body>
</html>

网页大致长这样

vue端

注意：这里接收事件的代码要写在 onMount() 声明周期钩子中
主要的就是进行事件监听：window.addEventListener(‘message’, function(e) {xxxxxx})

 onMounted(() => {

	  /**
	 * 监听 企服首页上面 传过来关闭事件
	 */
 	window.addEventListener('message', function(e) {
 		// 这就是接收到的数据
        console.log(e.data);
        // 接收到之后，再进行其他的逻辑处理就可以了
        。。。。。。
       
		// 如果还想给 iframe 返回数据，请这样写
        //window.parent.postMessage(JSON.stringify(data), 'http://www.nealyang.cn');

    });
})