HTML 打开页面链接强制chrome 全屏浏览

最新推荐文章于 2023-12-07 22:14:46 发布

原创最新推荐文章于 2023-12-07 22:14:46 发布 · 4.3k 阅读

3 ·

CC 4.0 BY-SA版权

_格鲁特宝宝原创，转载请务必注明出处

文章标签：

#chrome #全屏 #fullScreen #webkitRequestFullScreen

Web FrontEnd 同时被 3 个专栏收录

226 篇文章

订阅专栏

javascript

73 篇文章

订阅专栏

HTML

15 篇文章

订阅专栏

本文介绍了三种方法实现HTML页面在Chrome中强制全屏浏览。第一种是创建快捷方式并添加命令行参数`--kiosk`；第二种是通过JavaScript响应用户点击按钮实现全屏；第三种是使用jQuery.fullscreen插件，仅实现可视区域全屏。注意，使用快捷方式方法后，Chrome将始终以全屏模式打开指定网站，无法通过F11退出全屏。

1. 投机取巧法实现

第一步：建立一个 chrome 快捷方式。

第二步：快捷方式上右键，选择属性。然后在目标后面的框内写上：启动路径空格打开的网址空格 --kiosk

如下：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" https://www.baidu.com/ --kiosk

打开快捷方式即可成功。

注意，Chrome不能是打开的状态，否则设置不生效。

（使用此方法设置后，打开自定义全屏网站之后，再去点击chrome浏览器图标强制全屏显示，且不能手动F11关闭全屏。只能退出自定义全屏网站，再次点击chrome浏览器图标即可正常使用chrome，chrome浏览器控者慎用）

2. JS 代码实现--用户点击按钮实现全屏

function myFullScreen() {

    var docElm = document.documentElement;
    //W3C 
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }
    //FireFox 
    else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    }
    //Chrome等 
    else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }
    //IE11 
    else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    }
}

function closeMyFullScreen() {

    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

document.addEventListener("fullscreenchange", function () {
    
    fullscreenState.innerHTML = (document.fullscreen) ? "" : "not ";
}, false);

document.addEventListener("mozfullscreenchange", function () {
   
    fullscreenState.innerHTML = (document.mozFullScreen) ? "" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    
    fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "" : "not ";
}, false);

document.addEventListener("msfullscreenchange", function () {
    
    fullscreenState.innerHTML = (document.msFullscreenElement) ? "" : "not ";
}, false);

3. 使用插件实现--jquery.fullscreen（该方法只是实现可视区域全屏）

1) 项目地址：https://github.com/MonkeyMo/jQuery-FullScreen

2) 该插件就是一个js文件，下载地址：

链接：https://pan.baidu.com/s/1WTs69pKZ92UMKorYRk27Gw
提取码：teta

3) 使用方法：

第一步：在页面上引入js文件，

第二步：使用下面方式可以调用：

$("body").fullScreen();  //实现整个网页全屏

$("#main").fulScreen();  //实现局部网页全屏