postMessage的两种使用方式

更新时间：2022年12月31日 09:37:31 作者：zyfen

这篇文章主要介绍了使用postMessage实现iframe跨域通信，第一种使用postMessage在irfame中实现跨域数据传递，第二种使用postMessage在window.open()中的使用，本文结合示例代码给大家详细讲解，需要的朋友跟随小编一起看看吧

一、使用postMessage在irfame中实现跨域数据传递

1、父页面内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>主页面</h1>
        <iframe id="child" src="http://10.0.0.159:8080"></iframe>
        <div>
            <h2>主页面跨域接收消息区域</h2>
            <div id="message"></div>
        </div>
    </body>
    <script>
        /* -------------iframe跨域数据传递--------------- */
        
        //传递数据到子页面
        window.onload = function() {
            document.getElementById('child').contentWindow.postMessage("主页面消息", "http://10.0.0.159:8080")
        }
        //接受子页面传递过来的数据
        window.addEventListener('message', function(event) {
            document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
        }, false);
    </script>

</html>

2、子页面

（我这里在在vue页面里做的测试，vue模板的html代码就不展示了）

mounted() {

            //接收父页面传过来的数据
            window.addEventListener('message', function(event) {    
                
                // 处理addEventListener执行两次的情况，避免获取不到data
                // 因此判断接收的域是否是父页面
                if(event.origin.includes("http://127.0.0.1:8848")){
                    console.log(event);
                    document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
                                        
                    //把数据传递给父页面 > top.postMessage(要传递的数据,父页面的url访问地址)
                    top.postMessage("子页面消息收到", 'http://127.0.0.1:8848/boatStaticHtml/iframe%E9%80%9A%E4%BF%A1.html');                
                }
            }, false);    

        }

3、效果图展示

二、postMessage在window.open()中的使用

1、第一种方式，两个页面之前数据的相互传递

父页面：parent.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

        function openWin() {
            var params = new Array();
            params[0] = new Array("params1", "aaaaaa");
            params[1] = new Array("params2", "bbbbbb");

            var popupwin = window.open("child.html");
            //onload只能执行一次，也就是如果子窗口有onload事件，可能会覆盖。
            popupwin.onload = function(e){
                popupwin.postMessage(params, "http://127.0.0.1:8848/");
            }
                        
            popupwin.onunload = function(e){
                var val = popupwin.returnValue;
                alert(val);
            }
        }

    </script>
</head>
<body>
<input type="button" value="打开新页面" onclick="openWin()" />
</body>
</html>

子页面：child.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>popup window</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script language="javascript" type="text/javascript">
    function closeWin() {
        window.returnValue = true;
        window.close();
    }
 
    document.onreadystatechange = function(e)
    {
        if (document.readyState === 'complete')
        {
            window.addEventListener('message', function(e){
                var params = e.data;
                $('#params1').text(params[0][1]);
                $('#params2').text(params[1][1]);
            });
        } 
    };
</script>
</head>
<body>
<h3>Parameter params1: <b id="params1"></b></h3>
<h3>Parameter params2: <b id="params2"></b></h3>
<div><input type="button" value="Return Value" onclick="closeWin()" /></div>
</body>
</html>

效果如下：

2、第二种方式：

//-----父页面------
//打开新页面
window.open();
//监听新页面传递过来的数据
window.addEventListener('message', function(event) {
    console.log(event.data);
}, false);


//子页面数据传递方式，这个方式需要通过事件来传递
setTimeout(function(){
    window.opener.postMessage({ isColse: 'ok' }, '*');
},2000)

到此这篇postMessage的两种使用方式的文章就介绍到这了,更多相关postMessage iframe跨域通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript转换农历类实现及调用方法
农历是日常生活中不可或缺的一部分，它与人类的生活息息相关，从某种程度上说，它一直伴随着我们，今天的任务是JavaScript转换农历类的实现，感兴趣的你可以千万不要错过，希望本文对你有所帮助
2013-01-01
JavaScript闭包函数访问外部变量的方法
这篇文章主要介绍了JavaScript闭包函数访问外部变量的方法,本文使用匿名函数来实现在闭包中访问外部变量,需要的朋友可以参考下
2014-08-08
Mac下使用charles遇到的问题以及解决办法
本文主要介绍了Mac下使用charles遇到的问题以及解决办法。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
Javascript模拟加速运动与减速运动代码分享
这篇文章主要介绍了Javascript加速运动与减速运动代码分享,需要的朋友可以参考下
2014-12-12
JavaScript中二分查找的例题详解
二分查找在我们学习算法中是很重要的一部分，而且面试的时候会经常的让我们手写一些算法。所以这篇文章将通过三个场景带大家深入了解二分查找算法
2023-03-03
JavaScript基础之静态方法和实例方法分析
这篇文章主要介绍了JavaScript基础之静态方法和实例方法,简单分析了javascript静态方法及实例方法的定义、使用相关操作技巧与注意事项,需要的朋友可以参考下
2018-12-12
javascript 在firebug调试时用console.log的方法
当你使用console.log()函数时，下面的firebug一定要打开，不然这函数在用firefox运行时无效且影响正常程序，如果用IE打开，将会出错
2012-05-05
认识延迟时间为0的setTimeout
由 John Resig 的 How JavaScript Timers Work 可以知道，现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中，不会同步去执行，必须在完成一个任务后才开始另外一个任务。
2008-05-05
如何解决日期函数new Date()浏览器兼容性问题
这篇文章主要介绍了如何解决日期函数new Date()浏览器兼容性问题,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
JavaScript学习笔记之取值函数getter与取值函数setter详解
这篇文章主要介绍了JavaScript取值函数getter与取值函数setter，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08