html实现iframe全屏的示例代码
发布时间:2023-09-01 16:13:16 作者:慕云枫
我要评论
![](/skin/2018/images/text-message.png)
iframe是HTML5标准中提供的一种新标签,本文就介绍了html实现iframe全屏的示例代码,具有一定的参考价值,感兴趣的可以了解一下
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
前言
html浏览器全屏操作,基于jquery
iframe全屏、指定标签全屏
实现
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /** 全屏*/ .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是内容
1 2 3 4 | < 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | 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
最新评论