广告位联系
返回顶部
分享到

html实现iframe全屏的代码

HTML/Xhtml 来源:互联网 作者:佚名 发布时间:2023-09-03 12:34:25 人浏览
摘要

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-dbc

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();

    }

}


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • HTML的img元素无法显示base64图片的原因介绍
    如果使用 base64 编码的图片在 HTML 的 img 元素中无法显示,可能有以下几个原因: 1、语法错误:img 元素中的 src 属性必须以 data: 开头,后面
  • html实现iframe全屏的代码
    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
  • html页面点击按钮实现页面跳转功能
    方法1、在button标签外嵌套一个a标签,利用超链接进行跳转; 1 2 3 a href=https://www.baidu.com/ target=_blank button进入baidu首页/button /a 方法2、在but
  • HTML点击按钮button跳转页面的四种方法介绍
    其实我比较喜欢第一种方法 1 button onclick=window.location.href=../routeEdit/index.html type=button id=add新增/button 正文 方法一:在button标签中加上onclick属
  • td内容自动换行,table表格td设置宽度后文字太多
    设置table 的 style=table-layout:fixed; 然后设置td的 style=word-wrap:break-word; 即可 但这种情况下表格宽度自由分配,所以如果不用设置table 的 style=t
  • HTML静态页面获取url参数和UserAgent的实现代码

    HTML静态页面获取url参数和UserAgent的实现代码
    接技术支持小伙伴信:有用户反馈app在华为设备上下载不了,以为是服务器覆盖的范围不够或服务器挂了,直到另一个客服同事发来一个录
  • html网页引入svg图片的4种方式总结
    web应用开发使用svg图片,总结了下,可以有如下4种方式: 1. 直接插入页面。 2. img标签引入。 3. css引入。 4. object标签引入。 1. 直接插入页
  • html中两种获取标签内的值的方法介绍
    获取标签中value的值 使用的javascript获取,所以肯定是包含在 script 标签里的,也需要引入jquery 标签示例: 1 input id=goodsCount type=text size=2 re
  • HTML基本元素标签介绍

    HTML基本元素标签介绍
    一、什么是HTML HTML(Hypertext Markup Language):即超文本标记语言,是一种用来设计网页的标记语言,用该语言编写的文件,以.html或.htm为后缀
  • HTML中的表格元素介绍

    HTML中的表格元素介绍
    表格元素的作用:用来格式化显示数据。 一、表格的基本结构 表格的基本语法: TABLE border=设置表格边框尺寸大小 width= cellpadding= cellspaning
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计