检测跨域iframe内的方向更改 [英] Detect orientation change from within cross-domain iframe

问题描述

所以我有一个.jsp页面，里面有一个iframe。此iframe的内容托管在单独的域中。在移动设备上，我正在寻找这个iframe来检测方向更改并相应地更改内容的尺寸。

So I have a .jsp page that has an iframe in it. The content of this iframe is hosted on a separate domain. On a mobile device, I'm looking for this iframe to detect an orientation change and alter the dimensions of the content accordingly.

有没有办法添加事件监听器存储在此iframe中的内容会检测到方向更改吗？

Is there a way to add an event listener to the content stored within this iframe that would detect an orientation change?

如果此内容不在iframe中，而是直接访问，则调用如：window.addEventListener （'orientationchange'，FunctionToBeCalled，false）;
成功捕获方向更改并调用相应的函数。但是，我似乎无法在iframe中使用它。我已经尝试过parent.addEventListener，parent.window.addEventListener，top.addEventListener等，但无济于事。

If this content were not within an iframe, and accessed directly instead, a call like: window.addEventListener('orientationchange', FunctionToBeCalled, false); successfully catches an orientation change and calls the appropriate function. However, I can't seem to get this to work from within the iframe. I've tried parent.addEventListener, parent.window.addEventListener, top.addEventListener, etc. but to no avail.

从我读过的内容听起来好像是因为这是一个跨域调用，我的父功能非常有限，我注定要失败吗？

From what I've read it sounds like since this is a cross-domain call I have very limited parent functionality available to me, am I doomed to fail?

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

Any help would be greatly appreciated. Thanks!

推荐答案

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

If you own the code of the parent window you can use cross document messsages to solve this. You could send the orientation from the parent window to the iframe. This should work as well in the cross domain scenario. I tested this on iphone 4.3 and android 2.2.

在父窗口中：注册方向更改并将其转移到iframe

In the parent window : register for orientation changes and transfer it to the 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中：订阅父母的方向更改

In the iframe : subscribe to orientation changes from the parent

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

检查出来有关详细信息： http://html5demos.com/postmessag e2

Check this out for more details : http://html5demos.com/postmessage2

这篇关于检测跨域iframe内的方向更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！