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

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

 

posted @ 2018-11-28 17:27  格鲁特baby  阅读(958)  评论(0编辑  收藏  举报