天天看點

關于js如何實作特定div全屏顯示、視窗全屏、圖檔全屏顯示

作者:小小前端開發

如果對您有幫助,可以收藏一下,以備後續使用,節約資料查找時間

//全屏使用示例

// 視窗全屏

$('.win-fullscreen').on('click', function () {

requestFullScreen(document.documentElement);

});

// div全屏

$('.Full_screen').on('click', function () {

var address = $(this).attr("data-addrss");

requestFullScreen($('.see_infor')[0], address);

});

// 圖檔全屏

$('.img-fullscreen').on('click', function () {

requestFullScreen($('.img')[0]);

});

// 退出全屏

$(document).on('click', '.exit-fullscreen', function () {

exitFull();

});

// 視窗狀态改變事件 .tea-show 操作按鈕

fullscreenchange(document, function (isFull, address) {

console.log(isFull, address);

});

/* 封裝 */

// 視窗狀态改變

function fullscreenchange(el, callback) {

el.addEventListener("fullscreenchange", function () {

callback && callback(document.fullscreen);

});

el.addEventListener("webkitfullscreenchange", function () {

callback && callback(document.webkitIsFullScreen);

});

el.addEventListener("mozfullscreenchange", function () {

callback && callback(document.mozFullScreen);

});

el.addEventListener("msfullscreenchange", function () {

callback && callback(document.msFullscreenElement);

});

}

// 全屏

function requestFullScreen(element) {

var requestMethod = element.requestFullScreen || //W3C

element.webkitRequestFullScreen || //Chrome等

element.mozRequestFullScreen || //FireFox

element.msRequestFullScreen; //IE11

if (requestMethod) {

requestMethod.call(element);

} else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer

var wscript = new ActiveXObject("WScript.Shell");

if (wscript !== null) {

wscript.SendKeys("{F11}");

}

}

}

//退出全屏

function exitFull() {

var exitMethod = document.exitFullscreen || //W3C

document.mozCancelFullScreen || //Chrome等

document.webkitExitFullscreen || //FireFox

document.webkitExitFullscreen; //IE11

if (exitMethod) {

exitMethod.call(document);

} else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer

var wscript = new ActiveXObject("WScript.Shell");

if (wscript !== null) {

wscript.SendKeys("{F11}");

}

}

}

繼續閱讀