zoukankan      html  css  js  c++  java
  • js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入:

    1、当用户点击某按钮,触发iframe下的页面全屏。

    2、不允许用户退出全屏。

    解决第一点,触发全屏可以按照网上的例子,代码如下:

    function fullScreen(){
            var elem = parent.$("iframe")[1];//重点在这里,全屏父页面的iframe
            //console.log(document == parent.$("iframe")[1].contentWindow.document);
            requestFullScreen(elem);
        }
    
        function requestFullScreen(element) {
            console.log(element);
            //某个元素有请求
            var requestMethod = element.requestFullScreen
                ||element.webkitRequestFullScreen //谷歌
                ||element.mozRequestFullScreen  //火狐
                ||element.msRequestFullScreen; //IE11
    //        console.log(requestMethod);
    //        console.log(element);
            if (requestMethod) {
                requestMethod.call(element);   //执行这个请求的方法
            } else if (typeof window.ActiveXObject !== "undefined") {  //window.ActiveXObject判断是否支持ActiveX控件
                //这里其实就是模拟了按下键盘的F11,使浏览器全屏
                var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX
                if (wscript !== null) {    //创建成功
                    wscript.SendKeys("{F11}");//触发f11
                }
            }
        }
    View Code

    但是第二点遇到了问题:

    1、通过捕获键盘事件,捕获“esc”或者“f11”,不能够阻止退出全屏操作!

    估计可能是chrome浏览器默认了esc或f11的操作,这两个键的优先级更高。
    所以通过禁用键盘事件,行不通。

    2、通过监听屏幕变化事件。

    通过

    function checkFull() {
        var fullScreen = parent.document.webkitIsFullScreen || parent.document.fullscreen || parent.document.mozFullScreen || parent.document.msFullscreenElement;
        return !fullScreen;
    }
    View Code

    判断是否是全屏。可行。

    理论上通过监听全屏来控制退出没问题:用户退出全屏,继续通过本文的第一段代码,由js恢复全屏。但是现实会提示:该操作必须由用户完成。

    可以参考一下文章:http://web.jobbole.com/89098/

    做点功能这么困难吗?看来只有曲线救国了~。

    这里想到用confirm来提示:

    1、如果退出全屏,直接结束本次操作,记录他的错误操作。

    2、如果取消退出,用函数恢复全屏。

    理想很丰满,现实很骨感。继续出现(由js恢复全屏,会提示:该操作必须由用户完成。)提示。

    想到通过自定义confirm来完成,毕竟自定义confirm是通过调用页面隐藏div(包括“确认”,“取消”按钮)来控制的。所以这里浏览器应该会认为是用户操作。

    完成功能,提示代码如下:

    function requestFullScreen(element) {
            //某个元素有请求
            var requestMethod = element.requestFullScreen
                ||element.webkitRequestFullScreen //谷歌
                ||element.mozRequestFullScreen  //火狐
                ||element.msRequestFullScreen; //IE11
            if (requestMethod) {
                requestMethod.call(element);   //执行这个请求的方法
            } else if (typeof window.ActiveXObject !== "undefined") {  //window.ActiveXObject判断是否支持ActiveX控件
                //这里其实就是模拟了按下键盘的F11,使浏览器全屏
                var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX
                if (wscript !== null) {    //创建成功
                    wscript.SendKeys("{F11}");//触发f11
                }
            }
        }
    
    //监听退出全屏事件
    window.onresize = function() {
        if(checkFull()) {
            layer.confirm('退出全屏则***,确定退出吗?', null,
                function(){
                    //dosth
                    layer.closeAll();
                },
                function(){
                    requestFullScreen(parent.$("iframe")[1]);
            });
        }
    }
    
    function checkFull() {
        var fullScreen = parent.document.webkitIsFullScreen || parent.document.fullscreen || parent.document.mozFullScreen || parent.document.msFullscreenElement;
        return !fullScreen;
    }

    功能比较low,有大神有其他想法,多交流。

  • 相关阅读:
    vue_源码 原理 剖析
    vue_vuex
    vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航
    vue_mint-ui
    vue_ajax 请求
    vue_组件间通信:自定义事件、消息发布与订阅、槽
    vue_小项目_吃饭睡觉打豆豆
    vue-cli 脚手架 Command Line Interface
    程序员面试金典-面试题 04.03. 特定深度节点链表
    程序员面试金典-面试题 04.02. 最小高度树
  • 原文地址:https://www.cnblogs.com/PPBoy/p/10469602.html
Copyright © 2011-2022 走看看