Question

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

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

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

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

非常感谢任何帮助。谢谢！

Answer 1

如果您拥有父窗口的代码，则可以使用跨文档消息来解决此问题。您可以将方向从父窗口发送到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

检测跨域iframe内的方向更改

1 个答案: