Register

  • 点击获取
  •   

已有账号直接登录    

公告:
浏览器/iframe 全屏、退出全屏
首页 > IT计算机 > Web程序设计    作者:RainFly   2018年9月21日 10:46 星期五   热度:4902°   字号:   评论:12    
时间:2018-9-21 10:46   热度:4902°  评论:12 条 

外面的 html 文件 index.html:

    

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>fullScreen</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <iframe allowfullscreen src="iframe.html" frameborder="0" style="width: 500px;height: 500px;background:#aaa"></iframe>
</body>

</html>
里面嵌套的 iframe.html 文件:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    <h1>iframe</h1>
    <button id="button">全屏</button>
    <script>
        // 判断是否允许全屏
        var fullscreenEnabled =
            document.fullscreenEnabled ||
            document.mozFullScreenEnabled ||
            document.webkitFullscreenEnabled ||
            document.msFullscreenEnabled;
        // 全屏
        function launchFullscreen(element) {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            } 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();
            }
        }
        var btn = document.querySelector('#button');
        if (fullscreenEnabled) {
            btn.addEventListener('click', function () {
                var fullscreenElement =
                    document.fullscreenElement ||
                    document.mozFullScreenElement ||
                    document.webkitFullscreenElement;
                if (fullscreenElement) {
                    exitFullscreen();
                    btn.innerHTML = '全屏';
                } else {
                    launchFullscreen(document.documentElement);
                    btn.innerHTML = '退出全屏';
                }
            }, false);
        }
        // 监听全屏事件
        document.addEventListener('webkitfullscreenchange', function fullscreenChange() {
            if (document.fullscreenEnabled ||
                document.webkitIsFullScreen ||
                document.mozFullScreen ||
                document.msFullscreenElement) {
                console.log('enter fullscreen');
            } else {
                console.log('exit fullscreen');
            }
        }, false);
    </script>
</body>

</html>







 您阅读这篇文章共花了:  
捐赠支持:如果觉得这篇文章对您有帮助,请"扫一扫"鼓励作者!
二维码加载中...
本文作者:RainFly      文章标题: 浏览器/iframe 全屏、退出全屏
本文地址:http://www.rainfly.cn/?post=318
版权声明:若无注明,本文皆为“雨夜轩”原创,转载请保留文章出处。

已有12条吐槽

阿Q博客  Google Chrome 69.0.3497.100 Google Chrome 69.0.3497.100 Windows 7 Windows 7  四川省成都市 广电网 2019-08-22 20:40 #7楼
你这是一个分享代码的博客?文章不错支持一下吧,非常喜欢
免费资源 Firefox 47.0 Firefox 47.0 Windows 10 Windows 10 湖南省 电信 2019-12-04 19:51
@阿Q博客:这东西我收了!谢谢!
阿Q博客  Google Chrome 69.0.3497.100 Google Chrome 69.0.3497.100 Windows 7 Windows 7  四川省成都市 广电网 2019-08-22 20:40 #6楼
你这是一个分享代码的博客?文章不错支持一下吧,非常喜欢
今日新闻  Google Chrome 63.0.3239.132 Google Chrome 63.0.3239.132 Windows 7 Windows 7  广西贺州市 联通 2019-05-12 23:50 #5楼
文章不错支持一下吧,非常喜欢
SSR节点 Firefox 47.0 Firefox 47.0 Windows 10 Windows 10 湖南省衡阳市 电信 2019-05-15 02:06
@今日新闻:来这里多学习~!
泸州鬼麻将  Google Chrome 63.0.3239.132 Google Chrome 63.0.3239.132 Windows 7 Windows 7  广东省深圳市龙岗区 电信 2019-03-25 09:22 #4楼
学习了。
新闻  UBrowser 8.7 UBrowser 8.7 Windows 7 Windows 7  广西贺州市 联通 2018-11-21 23:11 地板
文章不错非常喜欢
免费SSR节点 Firefox 47.0 Firefox 47.0 Windows 10 Windows 10 湖南省邵阳市 电信 2019-02-02 01:17
@新闻:希望能学有所成。
免费节点 Firefox 47.0 Firefox 47.0 Windows 7 Windows 7 湖南省 电信 2019-03-17 13:13
@新闻:希望能学有所成。
情感口述  Google Chrome 63.0.3239.132 Google Chrome 63.0.3239.132 Windows 7 Windows 7  江苏省无锡市 电信 2018-11-05 15:00 板凳
互通有无
跨境电商导航 Firefox 47.0 Firefox 47.0 Windows 10 Windows 10 湖南省 电信 2018-12-19 00:40
@情感口述:这个必须学习收藏,多谢了
博客大全  Google Chrome 69.0.3497.100 Google Chrome 69.0.3497.100 Windows 10 Windows 10  江苏省常州市 移动 2018-10-10 10:29 沙发
学无止境,加油!

QQ游客评论1

返回顶部    首页    捐赠支持    手气不错    友情链接    关于我们    站长工具    站长介绍    手机版本    后台登陆   
版权所有:雨夜轩    站长:RainFly    特别鸣谢   文章归档   皖ICP备15003600号-1   百度统计
Copyright©2015雨夜轩 Powered by emlog强力驱动 七牛CDN全球加速 360站长联盟安全认证 中国博客联盟荣誉成员 可信赖网站 谷歌地图   百度地图   
页面加载耗时:0.234秒 数据库查询次数:38次
背景设置