iframe全屏兼容（按钮在iframe里）

最新推荐文章于 2023-06-12 09:08:47 发布

weixin_30289831

最新推荐文章于 2023-06-12 09:08:47 发布

阅读量287

点赞数

原文链接：http://www.cnblogs.com/feng-xl/p/9132328.html

版权

全屏思路

在子页面iframe.html里点击“全屏显示” 按钮，我是根据按钮的文本来判断调用父页面main.html定义的哪个方法。

在父页面的全屏事件，首先是调用API全屏方法，比如requestFullscreen() 用于异步请求使元素进入全屏模式，其次主要是让除了iframe标签，其余标签进行隐藏display:none;让iframe标签固定定位，高宽%即可。

在父元素的退屏事件，首先是调用API退屏方法，其次主要是让除了iframe标签，其余标签进行隐藏display:"" 为空，让iframe标签样式还原(不一定按照我的来)。

浏览器兼容：

供应商前缀
1、webkit (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
2、moz (Firefox)
3、o (Old, pre-WebKit, versions of Opera)
3、ms (Internet Explorer and Microsoft Edge)
更多：https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix

main.html页面

html关键代码：

<body>
        <!--横向菜单开始-->
        <div class="grid_12">
           ...
        </div>
        <!--横向菜单结束-->
        <div class="clear"></div>
        <!--侧边菜单开始-->
        <div class="grid_2">
           ...
        </div>
        <!--侧边菜单结束-->
        <!--内容开始-->
        <div style="width: 82%;float: left;">
            <iframe id="iframe" name="mainFrame" src="" width="100%" scrolling="yes" frameborder="0"></iframe>
        </div>
        <!--内容结束-->
    </div>
    <div class="clear"></div>
    <div id="site_info"><p>Copyright...</p></div>
</body>

/*全屏iframe*/
        function quan() {
            /*全屏iframe兼容*/
            var docElm = document.documentElement;
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            } else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            } else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            } else if (docElm.oRequestFullscreen) {
                docElm.oRequestFullscreen();
            } else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
            $(".grid_12").css("display", "none");
            $("#site_info").css("display", "none");
            $("#full-screen-btn").css("display", "none");
            $("iframe").css("height", "100%");
            $("iframe").css("width", "100%");
            $("iframe").css("position", 'fixed');
            $("iframe").css("left", "0px");
            $("iframe").css("top", "0px");

        }
        /*退出全屏iframe*/
        function exitQ() {
            var mainheight = $('.sidemenu').height();  获取侧边菜单高度
            $(".grid_12").css("display", "");
            $("#site_info").css("display", "");
            $("#full-screen-btn").css("display", "");
            /*退屏iframe兼容*/
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.oRequestFullscreen) {
                document.oCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
            $("iframe").css("height",mainheight + 'px');    高度是侧边菜单高度，保持一致
　　　　　　　$("iframe").css("width", "");
 　　　　　　 $("iframe").css("position", ""); 
　　　　　　　　$("iframe").css("left", ""); 
　　　　　　　　$("iframe").css("top", "");
 }

iframe.html页面

html关键代码：

 <div id="full-screen-btn">全屏显示</div>        //按钮
<div>iframe子页面的内容</div>

js部分关键代码：

         /*全屏显示*/
            $("#full-screen-btn").click(function () {
                if ($("#full-screen-btn").text() == "全屏显示") {
                    parent.quan(); 
                    $("#full-screen-btn").text("退出全屏");
                } else {
                    parent.exitQ();
                    $("#full-screen-btn").text("全屏显示");
                }
            });

其中 parent.quan(); 是原生js 子页面调用父页面的 quan() 方法

转载于:https://www.cnblogs.com/feng-xl/p/9132328.html

weixin_30289831

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
iframe全屏兼容（按钮在iframe里）

全屏思路在子页面iframe.html里点击“全屏显示” 按钮，我是根据按钮的文本来判断调用父页面main.html定义的哪个方法。在父页面的全屏事件，首先是调用API全屏方法，比如requestFullscreen() 用于异步请求使元素进入全屏模式，其次主要是让除了iframe标签，其余标签进行隐藏display:none;让iframe标签固定定位，高宽%即可。在父元素的退屏事件...
复制链接

扫一扫