html實現(xiàn)iframe全屏的示例代碼
發(fā)布時間:2023-09-01 16:13:16 作者:慕云楓
我要評論
iframe是HTML5標(biāo)準(zhǔn)中提供的一種新標(biāo)簽,本文就介紹了html實現(xiàn)iframe全屏的示例代碼,具有一定的參考價值,感興趣的可以了解一下
前言
html瀏覽器全屏操作,基于jquery
iframe全屏、指定標(biāo)簽全屏
實現(xiàn)
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
關(guān)鍵是lay-dbclick-box和lay-dbclick-screen,其中的iframe是內(nèi)容
<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();
}
})
// 全屏事件監(jiān)聽
document.addEventListener("fullscreenchange", function(){
if (getFullscreenElement() == null) {
console.log("-----------------[退出全屏]--------------")
$(".lay-fullScreen").attr("lay-svalue", "");
$(".lay-fullScreen").removeClass("lay-fullScreen");
exitFullscreen();
}else {
console.log("-----------------[打開全屏]--------------")
}
})
}
/**
* -------------------------------------------------------------------------------------------------------
* 獲取全屏狀態(tài)
*/
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();
}
}到此這篇關(guān)于html實現(xiàn)iframe全屏的示例代碼的文章就介紹到這了,更多相關(guān)html實現(xiàn)iframe全屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章

html父子頁面iframe雙向發(fā)消息的實現(xiàn)示例
這篇文章主要介紹了html父子頁面iframe雙向發(fā)消息的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來2020-10-12詳解iframe的src指向的內(nèi)容不刷新的解決辦法
這篇文章主要介紹了詳解iframe的src指向的內(nèi)容不刷新的解決辦法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小2020-05-19如何用iframe套用對方網(wǎng)頁數(shù)據(jù)而又保持兼容的實現(xiàn)方法
這篇文章主要介紹了如何用iframe套用對方網(wǎng)頁數(shù)據(jù)而又保持兼容的實現(xiàn)方法,需要的朋友可以參考下2020-01-28
HTML阻止iframe跳轉(zhuǎn)頁面并使用iframe在頁面內(nèi)嵌微信網(wǎng)頁版的實現(xiàn)方法
就想弄一個winform結(jié)合html5的一個小東西,突有心血來潮,想在里面嵌套一個微信網(wǎng)頁版,下面小編給大家介紹下HTML阻止iframe跳轉(zhuǎn)頁面并使用iframe在頁面內(nèi)嵌微信網(wǎng)頁版的實2018-01-09- 這篇文章主要介紹了HTML中iFrame標(biāo)簽的兩個用法,分別是作為彈出層鋪底覆蓋 ,和跨域?qū)懭隿ookie,需要的朋友可以參考下2015-07-09


