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

版权声明：JiahaoZhang原创文章，转载请注明出处 https://blog.csdn.net/GrootBaby/article/details/84587691

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();  //实现局部网页全屏