2011-01-25 67 views
10

所以我有一个.jsp页面,其中有一个iframe。此iframe的内容托管在单独的域上。在移动设备上,我正在查找此iframe以检测方向更改并相应地更改内容的尺寸。检测来自跨域iframe内的方向变化

有没有办法将事件侦听器添加到存储在此iframe中的内容中,以检测方向更改?

如果此内容不在iframe中,而是直接访问,则调用如下所示:window.addEventListener('orientationchange',FunctionToBeCalled,false); 成功捕捉到方向更改并调用相应的功能。但是,我似乎无法从iframe中使用此工作。我试过parent.addEventListener,parent.window.addEventListener,top.addEventListener等,但无济于事。

从我读过的这听起来像是因为这是一个跨域调用我有非常有限的父功能可用于我,我注定要失败?

任何帮助将不胜感激。谢谢!

回答

13

如果您拥有父窗口的代码,您可以使用跨文档消息来解决此问题。您可以将方向从父窗口发送到iframe。这应该在跨域方案中也适用。 我在iphone 4.3和android 2.2上测试了这个。

在父窗口:注册方位的变化,并将其转移到IFRAME

window.addEventListener("orientationchange", function(){ 
       var iframe = document.getElementById("youriframe").contentWindow; 
       iframe.postMessage({ 
        orientation: window.orientation 
       }, 'http://the.domain.of.the.iframe.com'); 
}, false) 

在iframe:订阅取向的变化从父

window.addEventListener("message", function(e){ 
      var newOrientationValue = e.data.orientation; 
      alert(newOrientationValue); // <--- DO your own logic HERE 
}, false) 

检查了这一点更多细节:http://html5demos.com/postmessage2