最近在工作中使用novnc远程连接电脑,在ifrmae中嵌入novnc页面,点击全屏按钮,能够让iframe页面全屏。
我的思路是:
1)点击全屏按钮,让当前页面全屏;
2)将iframe重新fixed定位,高宽设置100%,left top为0,定位到铺满当前浏览器全屏;
3)将全屏按钮也一起定位到右上角;
html代码 :
<!-- 状态详情 -->
<div class="rapair_status">
<div class="repair_title status_title">
远程详情
</div>
<div class="statis_machinetype">
<span style="white-space:pre"> </span> <div class="fullscreen" id="fullscreen">
<img src="__INS__/img/fullscreen.png" />
</div>
<iframe src="" class="ifr_diagnose" id="ifr_diagnose"></iframe>
</div>
</div>
js代码:
//远程连接全屏
$("#fullscreen").click(function(){
toggleFullscreen();
});
var toggleFullscreen = function(){
if(document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement){
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}else{
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (document.body.msRequestFullscreen) {
document.body.msRequestFullscreen();
}
}
//更新iframe定位
update_iframe_pos();
}
//退出全屏时恢复全屏按钮、iframe的定位方式
var update_iframe_pos = function(){
if(document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement){
$("#ifr_diagnose").addClass("ifr_fixed");
$("#fullscreen").addClass("full_fixed");
}else{
$("#ifr_diagnose").removeClass("ifr_fixed");
$("#fullscreen").removeClass("full_fixed");
}
}
//添加退出全屏时的监听事件
window.addEventListener("fullscreenchange", function(e) {
update_iframe_pos();
});
window.addEventListener("mozfullscreenchange", function(e) {
update_iframe_pos();
});
window.addEventListener("webkitfullscreenchange", function(e) {
update_iframe_pos();
});
window.addEventListener("msfullscreenchange", function(e) {
update_iframe_pos();
});
上面设置全屏、退出全屏代码很标准;
全屏时候、退出全屏时候给iframe(ifr_diagnose)、全屏按钮(fullscreen)重新定位;
效果:
有更好的使iframe全屏的例子或者思路欢迎提出来;会重新写个的。
后来想了下,上面的代码;点击全屏是在parent页面点击的,全屏按钮是定位在那里的,全屏后将全屏按钮也定位到相应的位置,但是全屏窗口拖动滚动条的时候,全屏按钮的位置就不对了;
改进了下:将全屏按钮放在iframe子页面上面;点击这个按钮,调用父页面的全屏方法;
代码:
//远程连接全屏
//当iframe加载完毕的时候执行,绑定全屏点击事件
$("#ifr_diagnose").load(function(){
//alert("加载完成!");
var Obtn = $("iframe").contents().find("#fullscreen");
$(Obtn).click(function(){
toggleFullscreen();
});
});
其他代码一样,只是将全屏按钮移到iframe子页去了、不用去定位全屏按钮了;
上面这个代码是精髓;
当子iframe页面加载完毕的时候,找到全屏按钮(id=fullscreen),给它绑定click事件,事件就是切换全屏;