html5 xdm 页面之间的通信

最新推荐文章于 2024-09-30 15:23:15 发布

weixin_30651273

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量124

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xudy/p/6057016.html

版权

<!-- 这个是父页面xdm.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>XDM通信</title>
    </head>
    <body>
        <iframe id="iframeId" src="http://127.0.0.1:8020/avalon/iframe.html" width="100%" height="600px"></iframe>
        <script type="text/javascript">
            window.addEventListener('load' , function(){
                var iframeWindow = document.getElementById('iframeId').contentWindow;
                
                iframeWindow.postMessage("滚犊子" , "http://127.0.0.1:8020/avalon/iframe.html");
            });
        </script>
    </body>
</html>

<!-- 这个是子页面，iframe.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body onload="aaaa()">
        <script type="text/javascript">
        function aaaa(){
            window.addEventListener('message' , function(event){
                console.log(event);
                alert(event.data);
            },false)
        }
        </script>
    </body>
</html>