Support I-Frames through PostMessage

[ngokevin]

Safari has a rule that disallows an I-Frame to access deviceorientation events to get rotation data. On aframe.io, we've had to limit the example scenes we show on mobile to scenes hosted on the same domain.

We can work around this by using postMessage. The parent window has a small script that continuously emits a postMessage with device orientation data. Then we have webvr-polyfill listen to the postMessage and send that data through the polyfill to support the I-Frame use case.

[borismus]

Are you suggesting to add a listener for these synthetic deviceorientation
events? If so I think that's reasonable. Open to PRs.

On Mon, Nov 14, 2016 at 5:24 PM Kevin Ngo notifications@github.com wrote:

Safari has a rule that disallows an I-Frame to access deviceorientation
events to get rotation data. On aframe.io, we've had to limit the example
scenes we show on mobile to scenes hosted on the same domain.

We can work around this by using postMessage. The parent window has a
small script that continuously emits a postMessage with device orientation
data. Then we have webvr-polyfill listen to the postMessage and send that
data through the polyfill to support the I-Frame use case.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#173, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AAQ8gKXh5s2YzKR7E1EjORMMsTQN22-Mks5q-Qm1gaJpZM4KyBCI
.

[htmlr]

@ngokevin can you share the code snippet that does this device orientation update via postMessage ?
I was considering using iframes as a way to load scenes asynchronously via the frame into a page

[ngokevin]

I don't have code snippets, but the pseudocode is:

window.top script:

window.addEventListener('devicemotion', function (evt) {
  iframes.forEach(function (iframe) {
    iframe.contentWindow.postMessage({name: 'devicemotionpolyfillupdate', acceleration: evt.acceleration, ...});
  });
});

Polyfill / I-Frame content script:

window.addEventListener('message', function (evt) {
  if (evt.data.name !== 'devicemotionpolyfillupdate') { return; }
  // Tell polyfill to update camera using device motion data.
});

[jsantell]

Added an example usage of iframes in the cardboard-vr-display README, as well fixed the issue with working with cross-origin iframes