HTML5解决跨域需求
2013-01-05 10:56:56
需要在一个站点内获得frame另一个站点内部鼠标事件(前提两个站点都有更改权限)。 说白了就是a站内嵌b站,在a站点击b站触发鼠标事件。
解决思路:既然window.frames["iframe1"].document.getElementsByName("eventBack")这种方式不给力,那么就换一个思路。 比如这个鼠标事件如果放到b站,当b验证是来自a站的请求,就添加一个鼠标事件,其余的不会有任何改变就ok了。这样也就能满足这个另类的需求了。开工!
HTML5提供了跨文档消息机制(Cross Document Messaging),它提供了跨越frame、tabs或windows通信的能力。这一点灰常重要,也就是因为这个,才能把上述过程实现。
目的:http://orz-i.com/ky站点内嵌http://f2e.it/ky 当点击http://orz-i.com/ky内文字时,触发frame内鼠标事件,在http://f2e.it/ky内鼠标事件不触发。
http://orz-i.com/ky/index.html 代码:
解决思路:既然window.frames["iframe1"].document.getElementsByName("eventBack")这种方式不给力,那么就换一个思路。 比如这个鼠标事件如果放到b站,当b验证是来自a站的请求,就添加一个鼠标事件,其余的不会有任何改变就ok了。这样也就能满足这个另类的需求了。开工!
HTML5提供了跨文档消息机制(Cross Document Messaging),它提供了跨越frame、tabs或windows通信的能力。这一点灰常重要,也就是因为这个,才能把上述过程实现。
目的:http://orz-i.com/ky站点内嵌http://f2e.it/ky 当点击http://orz-i.com/ky内文字时,触发frame内鼠标事件,在http://f2e.it/ky内鼠标事件不触发。
http://orz-i.com/ky/index.html 代码:
<iframe id="ifr" src="http://f2e.it/ky/index.html" height="240" width="320"></iframe> <script type="text/javascript"> window.onload = function() { var ifr = document.getElementById('ifr');//获取框架 var targetOrigin = 'http://f2e.it'; //目标源 ifr.contentWindow.postMessage('I was there!', targetOrigin); }; </script>http://f2e.it/ky/index.html 代码:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script type="text/javascript"> window.addEventListener('message', function(event){ // 通过origin属性判断消息来源地址 if (event.origin == 'http://orz-i.com')
{ alert(event.data); // 弹出"I was there!"
alert(event.source);// 对f2e.it、index.html中window对象的引用 // 但由于同源策略,这里event.source不可以访问window对象
$(function(){$("#ck").click( function() {alert("跨域弹窗!");});}); } }, false);
</script>
<div id="ck">点击我测试跨域弹窗</div>