html5—postMessage

最新推荐文章于 2023-09-13 22:23:19 发布

转载最新推荐文章于 2023-09-13 22:23:19 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/DemonCry/blog/745770

文章标签：

#python #javascript #json #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

主页面

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>跨文档消息传输示例</title>  
    </head>  
    <body>  
        <iframe src="http://193.168.19.168/ztree/demo/cn/msg.html" width="400" height="400" onload="sendMsg();"></iframe>  
        <div id="div1">  
              
        </div>  
        <script type="text/javascript" charset="utf-8">  
            //绑定onmessage事件,接收消息！  
            addEventListener('message',function(e){  
                e=e||event;  
                  
                //e.origin：协议+域名+端口（80默认不显示）  
                //e.data:消息内容  
                  
                var obj=JSON.parse(e.data);  
                  
                if(!obj.error){  
                    alert('接收成功！');  
                    document.getElementById('div1').innerHTML='从e.origin='+e.origin+',那里来的消息e.data='+e.data;  
                }  
            },false);  
              
              
            function sendMsg(){  
                //这里必须获得iframe窗口的window对象  
                //且不要用document.getElementByTagName('iframe')[0]  
                var winIframe=window.frames[0];  
  
                setTimeout(function(){  
                    //iframe窗口加载完成，使用postMessage向iframe内发送消息  
                    //第一个参数为：消息内容  
                    //第二个参数为：接收消息的对象窗口url,一般与iframe的src一致或url只到端口号http://193.168.19.168/  ;
                    winIframe.postMessage('{"张三":10,"李四":20,"王五":30,"小明":40,"小白":50,"老五":60,"老周":67}',"http://193.168.19.168/ztree/demo/cn/msg.html");  
                },2000);  
            }  
        </script>  
    </body>  
</html>

iframe指向的页面：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>iframe内容</title>  
        <script type="text/javascript" charset="utf-8">  
            //绑定onmessage事件,接收消息  
            addEventListener('message', function(e) {  
                e = e || event;  
  
                //可以过滤域  
                if (e.origin == 'http://127.0.0.1:8020') {  
                    alert('可以信任的信源');  
  
                    //接收从e.origin发来的消息e.data  
                    var obj = JSON.parse(e.data), aHtml = [];  
  
                    for (var key in obj) {  
                        var age = obj[key], str = '';  
  
                        switch(true) {  
                            case age<=10:  
                                str = key + '小朋友今年' + age + '岁。';  
                                break;  
                            case age<=20:  
                                str = key + '年青人今年' + age + '岁。';  
                                break;  
                            case age<=30:  
                                str = key + '中年人今年' + age + '岁。';  
                                break;  
                            case age<=40:  
                                str = key + '壮汉今年' + age + '岁。';  
                                break;  
                            case age<=50:  
                                str = key + '猛男今年' + age + '岁。';  
                                break;  
                            case age<=60:  
                                str = key + '快退休了，今年' + age + '岁。';  
                                break;  
                            default:  
                                str = key + '老年人今年' + age + '岁。';  
                                break;  
                        }  
                          
                        aHtml.push(str);  
                    }  
  
                    document.body.innerHTML = '从e.origin=' + e.origin + ',发来的消息e.data=<br />' + aHtml.join('<br />');  
                } else {  
                    alert('不可信任的消息源');  
                }  
  
                setTimeout(function() {  
  
                    //e.source即主页面的window对象，使用它向主页面发送消息  
                    e.source.postMessage('{"error":false,"msg":""}', e.origin);  
                }, 2000);  
            }, false);  
  
        </script>  
    </head>  
    <body>  
        <div id="div1">  
  
        </div>  
    </body>  
</html>

参考

http://www.cnblogs.com/jscode/p/3585932.html

https://segmentfault.com/a/1190000004414858

http://blog.youkuaiyun.com/starrexstar/article/details/8031859

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

转载于:https://my.oschina.net/DemonCry/blog/745770