postMessage处理iframe跨域问题_html/css_WEB-ITnose

背景：由于同源策略存在，javascript的跨域一直都是一个棘手的问题。 父页面无法直接获取iframe内部的跨域资源；同时，iframe内部的跨域资源也无法将信息直接传递给父页面 。

一：传统的解决方式。

传统的iframe资源解决方式：主要通过通过中间页面代理，此处不再赘述，参考 中间页获取跨域iframe

二：html5 postMessage的产生

随着HTML5的发展，html5工作组提供了两个重要的接口： postMessage(send) 和 onmessage 。这两个接口有点类似于websocket，可以实现两个跨域站点页面之间的数据传递。

postMessage API

下面是实践过程中两个小栗子：分别父页面传递信息给iframe，iframe传递信息给父页面。

三：iframe获取父页面信息

话不多说，直接上码：

参考demo： 父页面传给子页面demo

父页面代码

            崔涣 iframe postmessage 父页面              function sendIt() {            // 通过 postMessage 向子窗口发送数据            document.getElementById("otherPage").contentWindow                    .postMessage(                    document.getElementById("message").value,                    "http://cuihuan.net:8003"            );        }               

子页面代码

          崔涣测试子页面信息          //event 参数中有 data 属性，就是父窗口发送过来的数据     window.addEventListener("message", function( event ) {          // 把父窗口发送过来的数据显示在子窗口中       document.getElementById("content").innerHTML+=event.data+" ";      }, false );               this is the 8003 port for cuixiaozhuai      


      
查看更多关于postMessage处理iframe跨域问题_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111175