1.跨浏览器通讯之iframe 以及window.open

来源：互联网发布：pl sql developer下载编辑：程序博客网时间：2024/06/10 13:50

同一域名下通讯：

1.iframe之间通讯：

效果以及代码：http://sandbox.runjs.cn/show/3ntvrlml

2.BOM对象实现通讯：

效果以及代码：http://sandbox.runjs.cn/show/owl7v6pm

3.HTML5 Web Workers

HTML5实现iframe：

域名为http://localhost:8080下的页面：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><button id="ch">发送消息</button><iframe src="http://localhost:8080/HTML5/1/getMesage.html" frameborder="1"  id="iframe"></iframe><script>    document.getElementById("ch").onclick=function(){    /*实现效果        --当前页面的域名为http://127.0.0.1:8080/HTML5/1/postMessage.html        --向域名为http://localhost:8080/HTML5/1/getMesage.html的iframe发送数据        //postMessage参数         //第一个是要发送的数据        //第二个是要发送目标的域名[需要携带http协议,需要和iframe的域名相同]      */        document.getElementById("iframe").contentWindow.postMessage("1","http://localhost:8080")    }    </script></body></html>

域名为http://127.0.0.1:8080的接收信息页面：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><p>http://localhost:8080下的页面</p><script>    window.addEventListener('message', function(ev) {        //message事件的事件对象下保存了发送过来的内容        //ev.data : 发送过来的数据        //ev.origin        //alert('我接收到了a.com页面发送过来的数据，内容是：' + ev.data);        //alert(ev.origin);        if (ev.data == '1') {            document.body.style.background = 'red';            alert("命令来源："+ev.origin)        }    }, false);</script></body></html>

代码解释：

var attr=open("xxx.html") //这里返回的是一个window对象，可以通过attr来获取新窗口的window下的属性节点,iframe同理

HTML5：Web Workers:http://blog.jobbole.com/30592/

1 0