前端代码
<div id="screenshow" class="k1-r" style="margin-left:14.6%;height: 100%">
<div class="screenBtn">
<button class="full-screen-btn">全屏</button>
</div>
<div id="screenframeDiv" style="width: 100%;height: 100%">
<iframe id="screenframe" src="http://61.164.243.115:8080/dist3/#/kxrhxxpt/page1" frameborder="0" height="100%" width="100%"></iframe>
</div>
</div>
js代码
function isFullscreen(){
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
}
window.onresize = function() { //全屏的esc 做的一些处理
console.log(222222);
var isfull = isFullscreen();
console.log(isfull);
if (!isfull) {
console.log(11111);
//触发esc事件,执行业务逻辑。
$('.full-screen-btn').text("全屏");
}
};
//js code
function fullScreen(el) {
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
wscript;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
return;
}
if(typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if(wscript) {
wscript.SendKeys("{F11}");
}
}
}
function exitFullScreen(el) {
var el= document,
cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
wscript;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
// var btn = document.getElementById('btn');
var content = document.getElementById('screenshow'); //被全屏显示的元素
$('.full-screen-btn').on('click',function(){
var btntext = $(this).text();
if(btntext == "全屏"){
fullScreen(content);
var screenSrc = document.getElementById('screenframe').src;
$('#screenframeDiv').html('<iframe id="screenframe" src="'+screenSrc+'" frameborder="0" height="100%" width="100%"></iframe>');
$(this).text("退出全屏");
}else{
exitFullScreen(content);
var screenSrc = document.getElementById('screenframe').src;
$('#screenframeDiv').html('<iframe id="screenframe" src="'+screenSrc+'" frameborder="0" height="100%" width="100%"></iframe>');
$(this).text("全屏");
}
});