惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

B
Blog RSS Feed
美团技术团队
Attack and Defense Labs
Attack and Defense Labs
博客园 - 三生石上(FineUI控件)
Y
Y Combinator Blog
IT之家
IT之家
GbyAI
GbyAI
博客园_首页
酷 壳 – CoolShell
酷 壳 – CoolShell
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
博客园 - 聂微东
量子位
阮一峰的网络日志
阮一峰的网络日志
Hugging Face - Blog
Hugging Face - Blog
Recent Announcements
Recent Announcements
月光博客
月光博客
The GitHub Blog
The GitHub Blog
V
Visual Studio Blog
D
DataBreaches.Net
Microsoft Azure Blog
Microsoft Azure Blog
博客园 - 司徒正美
罗磊的独立博客
人人都是产品经理
人人都是产品经理
U
Unit 42
宝玉的分享
宝玉的分享
V
V2EX
雷峰网
雷峰网
C
Cyber Attacks, Cyber Crime and Cyber Security
博客园 - 叶小钗
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
L
LINUX DO - 热门话题
Engineering at Meta
Engineering at Meta
P
Palo Alto Networks Blog
Scott Helme
Scott Helme
Cisco Talos Blog
Cisco Talos Blog
Apple Machine Learning Research
Apple Machine Learning Research
Cyberwarzone
Cyberwarzone
腾讯CDC
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
C
Cybersecurity and Infrastructure Security Agency CISA
爱范儿
爱范儿
V
Vulnerabilities – Threatpost
Martin Fowler
Martin Fowler
P
Privacy & Cybersecurity Law Blog
S
Securelist
Google DeepMind News
Google DeepMind News
小众软件
小众软件
T
Threat Research - Cisco Blogs
D
Darknet – Hacking Tools, Hacker News & Cyber Security
L
LangChain Blog

博客园 - PPBoy

状态机的轮子 oracle生成path的sql语句 oracle表空间异常大 springboot2集成activiti出错 策略模式2 策略模式1 sql从n月到m月数据汇总,没有数据,当月显示0 jsp下拉列表 dao层取值用List<map<String,Object>>接收有序map 在线预览pdf springboot打jar包,调用webservice出错 导出到word ueditor后台配置项返回格式出错,上传功能将不能正常使用 js控制多层单选,多选按钮,做隐藏操作 springboot2.0jar包启动异常 第九篇: 高可用的服务注册中心 第八篇: 服务链路追踪(Spring Cloud Sleuth) 第七篇: 消息总线(Spring Cloud Bus) 第六篇: 分布式配置中心(Spring Cloud Config)
js控制全屏及退出全屏
PPBoy · 2019-03-04 · via 博客园 - PPBoy

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,有大神有其他想法,多交流。