html实现iframe全屏的示例代码
发布时间:2023-09-01 16:13:16 作者:慕云枫
我要评论
iframe是HTML5标准中提供的一种新标签,本文就介绍了html实现iframe全屏的示例代码,具有一定的参考价值,感兴趣的可以了解一下
前言
html浏览器全屏操作,基于jquery
iframe全屏、指定标签全屏
实现
css
/** 全屏*/
.lay-dbclick-box{
position: relative;
width: 100%;
height: 100%;
}
.lay-dbclick-screen{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999999999999;
}
.lay-fullScreen{
position: fixed;
left: 0;
top: 0;
border-radius: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
z-index: 9999999999999;
}
html
关键是lay-dbclick-box和lay-dbclick-screen,其中的iframe是内容
<div class="lay-dbclick-box">
<iframe src="" width="100%" height="100%" id="fullb" frameborder="0" allowfullscreen="" ></iframe>
<div class="lay-dbclick-screen"></div>
</div>
js
openFullScreen();
/**
* -------------------------------------------------------------------------------------------------------
* 通用全屏操作
*/
function openFullScreen(){
// 双击全屏/退出全屏
$(".lay-dbclick-screen").dblclick(function(){
var val = $(this).parent().attr("lay-svalue");
if(!val){
$(this).parent().addClass("lay-fullScreen");
$(this).parent().attr("lay-svalue", 1);
fullScreen();
}else{
$(this).parent().removeClass("lay-fullScreen");
$(this).parent().attr("lay-svalue", "");
exitFullscreen();
}
})
// 全屏事件监听
document.addEventListener("fullscreenchange", function(){
if (getFullscreenElement() == null) {
console.log("-----------------[退出全屏]--------------")
$(".lay-fullScreen").attr("lay-svalue", "");
$(".lay-fullScreen").removeClass("lay-fullScreen");
exitFullscreen();
}else {
console.log("-----------------[打开全屏]--------------")
}
})
}
/**
* -------------------------------------------------------------------------------------------------------
* 获取全屏状态
*/
function getFullscreenElement(){
return (
document['fullscreenElement'] ||
document['mozFullScreenElement'] ||
document['msFullScreenElement'] ||
document['webkitFullscreenElement'] || null
);
}
/**
* -------------------------------------------------------------------------------------------------------
* 全屏
*/
function fullScreen() {
var element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
/**
* --------------------------------------------------------------------------------------------------------
* 退出全屏
*/
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
到此这篇关于html实现iframe全屏的示例代码的文章就介绍到这了,更多相关html实现iframe全屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
- 这篇文章主要介绍了html父子页面iframe双向发消息的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来2020-10-12
- 这篇文章主要介绍了详解iframe的src指向的内容不刷新的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小2020-05-19
- 这篇文章主要介绍了如何用iframe套用对方网页数据而又保持兼容的实现方法,需要的朋友可以参考下2020-01-28
HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法
就想弄一个winform结合html5的一个小东西,突有心血来潮,想在里面嵌套一个微信网页版,下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实2018-01-09- 这篇文章主要介绍了HTML中iFrame标签的两个用法,分别是作为弹出层铺底覆盖 ,和跨域写入cookie,需要的朋友可以参考下2015-07-09
最新评论