1. 程式人生 > >HTML 開啟頁面連結強制chrome 全屏瀏覽

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();  //實現區域性網頁全屏