Question

我正在制作一个在iframe中运行“360全景查看器”的网站，其中源页面使用JavaScript和window.DeviceOrientationEvent来确定用户是否在具有方向功能的移动设备上。我在iOS Safari和iPad上看到了一些奇怪的行为。铬：

window.DeviceOrientationEvent的计算结果为true，但永远不会触发deviceorientation事件。

Android Chrome不是这种情况 - 在iFrame中使用时会按预期连续触发事件。

直接访问页面（在iOS上），我看到事件触发。就像在iframe中使用它一样“阻止”这个事件。

这对我来说没什么意义，研究它几乎没有显示信息，除了一些模糊的迹象[1,2]它实际上可能与CORS有关 - 或者iframe来源与iframe源在同一根域父页面。这对我来说更没意义..

任何人都有线索？

1 2

Answer 1

对于任何好奇的人，我都证实问题与CORS有关。它必须是Apple所做的安全事情 - 在iframe

中使用时阻止页面上的事件

我的临时解决方案是在同一台服务器上托管文件，但它不是可扩展的解决方案，所以我想我必须设置某种代理来处理这个问题。

Answer 2

可以使用Window.postMessage()将信息传递到iframe来解决。但是，您需要同时访问父级网站和iframe这两个网站。首先听父级事件中的deviceorientation事件，然后使用postMessage将事件传递到iframe中。

// Parent
window.addEventListener("deviceorientation", function (event) {
let iframeElement = document.getElementById("my-iframe");
iframeElement.contentWindow.postMessage({
        alpha: event.alpha,
        beta: event.beta,
        gamma: event.gamma
    },
    "*");

// Child
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
    console.debug(event.data);
}

Answer 3

对于现在遇到此问题的任何人，似乎苹果自iOS 12.2起已禁用deviceorientation API。用户现在需要在Settings > Safari > Motion and Orientation access中显式切换它。参见here进行讨论。

在iFrame中引用时，'deviceorientation'在iOS浏览器中不会触发

3 个答案: