Question

我正在制作一个我想要嵌入并可全屏显示的多媒体项目。我已经成功地将它全部用于桌面浏览，但是由于Apple已经修复了“全屏”API，我已经遇到了一些问题。

您可以在此处查看我正在使用的内容：http://kevinjbeaty.com/rmnp-100/

它可以在桌面Chrome，Safari等上完美运行，但在Android上却没有那么多，在移动Safari上完全没有。

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

有任何解决方法吗？

Answer 1

OK so here's the workaround I came up with. I have still not been able to make any fullscreen conversion happen for my iframe, but the fullscreen javascript operates off of a if/else loop, so I made the final bit of that loop open a new tab with the iframe's source URL, which is fullscreen, so at least I can embed the applet on some webpage and still get people to the full experience.

This is the 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();
}
}

If nothing else, it satisfies the need to get fullscreen from an embedded iframe on an ipad or other mobile Safari setup

IOS的替代全屏iframe选项？

1 个答案: