码迷,mamicode.com
首页 > 其他好文 > 详细

iframe的坑

时间:2020-01-11 18:50:02      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:har   http   inf   function   text   event   height   child   UNC   

通信例子

parent:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>MathJax v3 with interactive TeX input and HTML output</title>
    <script src="./js/jquery.min.js"></script>
</head>

<body>

    <iframe id="child" src=‘./child.html‘ width="800" height="600px" onload="echartIframeOnLoad()"></iframe>
    <script>
        function echartIframeOnLoad(e) {
            document.getElementById(child).contentWindow.postMessage(
                我是你爸爸3,
                *
            );
        }
        $(function () {
            document.getElementById(child).contentWindow.postMessage(
                我是你爸爸1,
                *
            );
        });
        setTimeout(() => {
            document.getElementById(child).contentWindow.postMessage(
                我是你爸爸2,
                *
            );
        }, 500)
        window.addEventListener(message, function (e) {
            // console.log(‘收到消息,child说‘)
            var d = e.data;  //e.data  里面有自己所传的所有参数  可以根据参数做自己的判断
            console.log(d);
        }, false);
    </script>
    </script>
</body>

</html>

child:

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <script type="text/javascript">
        window.addEventListener(message, function (e) {
            var d = e.data;  //e.data  里面有自己所传的所有参数  可以根据参数做自己的判断
            top.postMessage(
                {
                    mess: d,
                    from: child
                },
                *
            );
        });
    </script>
</body>

</html>

结果:

技术图片

 

 消息 "我说你爸爸1"一定收不到。"我是你爸爸2",当网速很差的时候,也收不到。 所以,父窗口一定要等到iframe加载完成后,才能发送消息!

iframe的坑

标签:har   http   inf   function   text   event   height   child   UNC   

原文地址:https://www.cnblogs.com/xunhanliu/p/12180540.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!