jquery 将窗口设置为全屏(真实的全屏; F11功能),通过javascript

ca1c2owp  于 2022-11-22  发布在  jQuery
关注(0)|答案(6)|浏览(374)

关于这一点有几个问题,* 有些人说这是不可能的,有些人说这是 * 可能的IE,如Internet Explorer full screen mode?,我想知道一个通用的解决方案和答案。
我正在建立一个图片库网页,当全屏查看时,图片库确实会带来很大的不同(正如标题所说,我说的是 * 真正 * 全屏,而不是与酒吧和窗口铬等),我想放置一个按钮全屏。(不,我不会在没有用户意图的情况下强制FS,我也讨厌这种“功能”)在Flash中,通过用户启动的操作(如单击按钮)来启动它是可能的,我想知道这种功能是否也适用于Javascript。从逻辑上讲,它应该有一个类似于Flash/SL用户启动全屏模式的机制。如果没有“通用”的功能,将工作的所有,我可以(聊胜于无)的部分功能(我的意思是 * 支持一些浏览器 *,而不是 * 设置窗口宽度/高度 * 等。不要回答告诉设置窗口宽度/高度,我知道怎么做,我不是在寻找它)太.

rsl1atfo

rsl1atfo1#

这在Chrome、Firefox和IE的最新版本中已经成为可能(11)。
按照Zuul在this thread上的指示,我编辑了他的代码,以包括IE11和全屏页面上任何元素的选项。
JS:

function toggleFullScreen(elem) {
    // ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
        if (elem.requestFullScreen) {
            elem.requestFullScreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

于飞:

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen(document.body)">

其中“document.body”是您希望的任何元素。
另外请注意,试图从控制台运行这些全屏命令似乎在Chrome或IE上不起作用。
另一件需要注意的事情是,这些“全屏”命令没有垂直滚动条,您需要在CSS中指定它:

*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

“!important”似乎是IE呈现它所必需的
是的。
对于任何想编辑它并将其转换成代码片段的人,请不要麻烦。代码不能在SO代码片段中工作,因为它将其放在iframe中。

plupiseo

plupiseo2#

    • 否 。 * * 旧 版 IE ( ≤ 6 ) 允许 此 功能 , 但 此 功能 被 视为 安全 问题 , 因此 现代 浏览 器 不 允许 此 功能 。

你 仍然 可以 使用 callwindow.open(url,'','fullscreen=yes') , 这样 你 就 可以 完成 90% 的 任务 , 但是 结果 会 略有 不同 :

  • IE 会 打开 一 个 只有 标题 栏 和 URL 栏 的 窗口 。 该 窗口 的 大小 可以 填充 整个 屏幕 , 并 * 覆盖 Windows 任务 栏 * 。
  • Mozilla 也 会 打开 一 个 只有 标题 栏 和 URL 栏 的 窗口 。 但是 , 新 窗口 会 继承 打开 窗口 的 尺寸 。 如果 打开 窗口 是 最 大 化 的 , 新 窗口 也 会 最 大 化 打开 。 ( 任务 栏 不会 被 覆盖 。 )
  • Chrome 也 会 打开 一 个 只有 标题 栏 和 URL 栏 的 窗口 。 新 窗口 继承 了 打开 窗口 的 尺寸 , 但 它 * 从未 以 最 大 化 打开 * ( 即使 打开 窗口 已 最 大 化 ) 。

你 的 另 一 个 选择 是 用 Flash * ( 唉 ! ) * 来 构建 一些 东西 , 或者 只是 让 你 的 " 全屏 " 按钮 弹出 一 个 lightbox , 上面 写 着 " 按 F11 来 全屏 " , 然后 在 window.resize 上 隐藏 lightbox , 或者 点击 lightbox 中 的 取消 按钮 。

falq053o

falq053o3#

我 想 知道 为什么 没有 人 注意 到 所有 的 答案 都 是 错 的 。
将 body 元素 设置 为 全屏 * * * 不 * * * 具有 与 按 F11 相同 的 行为 。
F11 的 相同 行为 可 通过 以下 方式 获得 :

document.documentElement.requestFullScreen();   // on

中 的 每 一 个

document.cancelFullScreen();  // off

格式
另外 , 为了 检查 我们 是否 处于 全屏 模式 , 我 使用 了 以下 行 :

isFullScreen=()=>!(document.currentFullScreenElement==null)

格式
它 还 检测 是否 通过 F11 调用 了 fullScreen :

isFullScreen=(document.documentElement.clientWidth==screen.width && document.documentElement.clientHeight==screen.height)

格式
注意 : * * 必须 从 用户 交互 事件 ( onclick 、 onkeydown 等 ) 中 调用 。 * *
注 2 : 当 用户 按 F11 时 , 全屏 中 没有 真正 设置 " 元素 " , 因此 检测 这种 情况 的 唯一 方法 是 使用 事件 侦听 器 拦截 键盘 , 或 检查 客户 端 尺寸 是否 与 屏幕 尺寸 相同 * *
还有 :

isFullScreen=window.matchMedia('(display-mode: fullscreen)').matches;

格式

vfwfrxfs

vfwfrxfs4#

你可以用一个有权限运行自动化脚本的java小程序来实现这个功能,但是,除非你的用户不介意你的网站操纵他们的机器,否则这是一个完全不实用的黑客。

k4emjkb1

k4emjkb15#

有 一 个 未知 的 库 为 您 制作 所有 的 工作 :
https://github.com/rafrex/fscreen 的 最 大 值
我 遇到 了 同样 的 问题 , 我 确实 遇到 了 ( 例如 在 React 组件 中 ) :

import fscreen from 'fscreen';
.....

if (fscreen.fullscreenElement == null) {
  fscreen.requestFullscreen(document.documentElement);
}else{
  fscreen.exitFullscreen();
}

中 的 每 一 个
适用 于 Chrome 浏览 器 , 火狐 浏览 器 , Safari 浏览 器 , IE11 , iOS , Android

cngwdvgl

cngwdvgl6#

Chrome或Firefox没有通过JavaScript实现全屏支持。但是你可以设法为MSIE提供全屏支持。但这也不是F11的功能。
即使chrome.exe -kiosk也无法以全屏模式打开页面。
原因是不建议强制用户在全屏模式下打开应用程序。如果不是这样,来自不同网站的所有弹出窗口都将在全屏模式下打开,您将最终关闭所有这些窗口。

相关问题