iframe 给嵌入的 vue页面发送数据（vue2、vue3 都ok）-Toy模板网

这篇具有很好参考价值的文章主要介绍了iframe 给嵌入的 vue页面发送数据（vue2、vue3 都ok）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求描述

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})文章来源地址https://www.toymoban.com/news/detail-738370.html

 onMounted(() => {

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

    });
})