IOS 的替代全屏 iframe 选项？答案

【问题标题】：Alternative fullscreen iframe option for IOS?IOS 的替代全屏 iframe 选项？
【发布时间】：2015-05-25 06:16:27
【问题描述】：

我正在开发一个多媒体项目，我希望它可以嵌入和全屏显示。我已经设法让桌面浏览一切正常，但由于 Apple 取消了“全屏”API，我遇到了一些问题。

你可以在这里看到我正在使用的东西：http://kevinjbeaty.com/rmnp-100/

它在桌面版 Chrome、Safari 等上完美运行，但在 Android 上效果不佳，在移动版 Safari 上则完全不行。

对我来说最重要的是让这个功能在嵌入中可用。网上列出的手动样式选项适用于全屏 iframe，但我不知道如何在可嵌入格式中制作这样的触发器。

有什么解决办法吗？

【问题讨论】：

@PhatWrat 请不要建议仅删除苹果标签的编辑。即使不鼓励不使用该标签，但您应该改进更多，而不仅仅是删除标签。看来您建议进行大量编辑仅删除苹果标签。

标签： iframe mobile safari fullscreen

【解决方案1】：

好的，这就是我想出的解决方法。我仍然无法为我的 iframe 进行任何全屏转换，但是全屏 javascript 在 if/else 循环之外运行，所以我使该循环的最后一点打开一个带有 iframe 源 URL 的新选项卡，即全屏，所以至少我可以将小程序嵌入到某些网页上，并且仍然可以让人们获得完整的体验。

这是js：

function expandbutton() {
var docElm = document.getElementById("iframeinsert");
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}

else {
 var form = document.createElement("form");
 form.method = "GET";
 form.action = "http://eptrail-media.com";
 form.target = "_blank";
 document.body.appendChild(form);
 form.submit();
}
}

如果没有别的，它可以满足从 ipad 或其他移动 Safari 设置上的嵌入式 iframe 获取全屏的需要

【讨论】：