首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >FullScreen iFrame在iOS中使用Javascript [Safari]

FullScreen iFrame在iOS中使用Javascript [Safari]
EN

Stack Overflow用户
提问于 2017-11-22 22:52:19
回答 1查看 1.9K关注 0票数 2

我设置了全屏功能:

代码语言:javascript
复制
function setUpFullScreen() {
    document.cancelFullScreen = document.webkitCancelFullScreen || document.mozCancelFullScreen || document.cancelFullScreen;
    document.body.requestFullScreen = document.body.webkitRequestFullScreen || document.body.mozRequestFullScreen || document.body.requestFullScreen;
    document.onfullscreenchange = document.onfullscreenchange || document.onwebkitfullscreenchange || document.onmozfullscreenchange;
    if (document.addEventListener) {
        document.addEventListener('webkitfullscreenchange', fullscreenChangeHandler, false);
        document.addEventListener('mozfullscreenchange', fullscreenChangeHandler, false);
        document.addEventListener('fullscreenchange', fullscreenChangeHandler, false);
        document.addEventListener('MSFullscreenChange', fullscreenChangeHandler, false);
    }
}

并使用以下方法切换FullScreen:

代码语言:javascript
复制
function toggleFullScreen() {
    if (isFullScreen()) {
        trace("Exiting fullscreen.");
        document.querySelector("svg#fullscreen title").textContent = "Enter fullscreen";
        document.cancelFullScreen();
    } else {
        trace("Entering fullscreen.");
        document.querySelector("svg#fullscreen title").textContent = "Exit fullscreen";
        document.body.requestFullScreen();
    }
}

检查是全屏:

代码语言:javascript
复制
function isFullScreen() {
    return !!(document.webkitIsFullScreen || document.mozFullScreen || document.isFullScreen);
}

切换全屏运行在Chrome、Safari、Firefox (桌面上)以及Android上的Chrome上。然而,没有工作的Safari和Chrome。我在safari上看到了以下错误:

代码语言:javascript
复制
TypeError: document.body.requestFullScreen is not a function. (In 'document.body.requestFullScreen()', 'document.body.requestFullScreen' is undefined)

如何使用javascript在iOS上完成全屏功能?

FYI:我的代码是https://appr.tc/ app/js/appcontroller.js的改编版

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-20 19:01:48

使用:

代码语言:javascript
复制
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

在HTML文件中为我工作。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47445075

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档