检测跨域 iframe 内的方向变化

发布于 2024-10-14 09:49:39 字数 462 浏览 2 评论 0原文

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

有没有办法向 iframe 中存储的内容添加事件侦听器来检测方向变化？

如果此内容不在 iframe 内，而是直接访问，则调用如下所示： window.addEventListener('orientationchange', FunctionToBeCalled, false); 成功捕获方向变化并调用适当的函数。但是，我似乎无法让它在 iframe 中工作。我尝试过parent.addEventListener、parent.window.addEventListener、top.addEventListener等，但无济于事。

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三寸金莲 2024-10-21 09:49:39

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

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.

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)

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)

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

回复收藏 0 原文

~没有更多了~