【问题标题】:FullScreen iFrame using Javascript in iOS [Safari]在 iOS [Safari] 中使用 Javascript 的全屏 iFrame
【发布时间】:2023-03-20 22:25:01
【问题描述】:

我设置了全屏功能:

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);
    }
}

并使用以下方法切换全屏:

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

检查是否全屏:

function isFullScreen() {
    return !!(document.webkitIsFullScreen || document.mozFullScreen || document.isFullScreen);
}

切换全屏适用于 Chrome、Safari、Firefox(桌面版)以及 Android 版 Chrome。但是,不适用于 Safari 和 Chrome。我在 safari 上看到以下错误:

TypeError: document.body.requestFullScreen is not a function. (In 'document.body.requestFullScreen()', 'document.body.requestFullScreen' is undefined)

如何使用javascript在iOS上实现全屏功能?

仅供参考:我的代码改编自 https://appr.tc/ https://github.com/webrtc/apprtc/blob/master/src/web_app/js/appcontroller.js

【问题讨论】:

  • setUpFullScreen 函数如何运行/执行?
  • @leo.fcx setUpFullScreen 在加载 iframe 后被调用。这些方法是在 iframe 中加载的页面的一部分。
  • 这是否意味着使用window.onload 或类似的东西?
  • @leo.fcx 仅供参考:我的代码改编自 appr.tc github.com/webrtc/apprtc/blob/master/src/web_app/js/…
  • 这并不能回答我的问题,即使它只是一个改编。您是否尝试过使用window.onload

标签: javascript html ios safari fullscreen


【解决方案1】:

使用:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

在 HTML 文件中为我工作。

【讨论】:

    猜你喜欢
    • 2017-08-18
    • 1970-01-01
    • 2012-10-01
    • 1970-01-01
    • 2019-11-05
    • 2021-11-24
    • 1970-01-01
    • 2011-05-28
    相关资源
    最近更新 更多