Skip to content

Instantly share code, notes, and snippets.

@kylebakerio
Last active September 11, 2021 16:04
Show Gist options
  • Save kylebakerio/704be74e2712886fba6d732287427edd to your computer and use it in GitHub Desktop.
Save kylebakerio/704be74e2712886fba6d732287427edd to your computer and use it in GitHub Desktop.
bypassing device orientation ios iframe limitations
// WIP
function iOS() {
return [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod'
].includes(navigator.platform)
// iPad on iOS 13 detection
|| (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}
if (iOS()) {
;["orientationchange","deviceorientation"].forEach(eventName => {
// comment out parent on child, and child on parent:
// Parent / outer container of iframe
window.addEventListener(eventName, function (event) {
event.mylabel = eventName
myframe.contentWindow.postMessage(
// we may need to send whole event, or whole event may be non JSON friendly, or slower for no reason.
// seemed suggested that this might be enough:
{
alpha: event.alpha,
beta: event.beta,
gamma: event.gamma
},
// event,
"*"
);
})
// Child / page running inside iframe
window.addEventListener("message", function receiveMessage(msgEvent) {
if (msgEvent?.mylabel === eventName) {
document.dispatchEvent(new Event(eventName,msgEvent));
}
})
})
}
@kylebakerio
Copy link
Author

this is not a finished product, and didn't seem to work at last testing, but I didn't have an iOS device to personally test. didn't go deeper, as ended up not being needed for project (we ended up hosting all experiences on the same domain, so child iframe was no longer cross origin, which is another way to get around the issue)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment