zoukankan      html  css  js  c++  java
  • HTML5全屏浏览器兼容方案

    最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样。

    标准 webkit  Firefox  IE
    Element.requestFullscreen() webkitRequestFullscreen mozRequestFullScreen msRequestFullscreen
    Document.exitFullscreen() webkitExitFullscreen mozCancelFullScreen msExitFullscreen
    Document.fullscreenElement webkitFullscreenElement mozFullScreenElement msFullscreenElement
    Document.fullscreenEnabled webkitFullscreenEnabled mozFullScreenEnabled msFullscreenEnabled
    Document.fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange
    Document.fullscreenerror webkitfullscreenerror mozfullscreenerror MSFullscreenError

     全屏接口提供了简单的方式通过用户整个屏幕展示浏览器的内容。这个接口让我们很轻松的引导浏览器使一个元素和它的子元素占据整个屏幕,并且从屏幕上消除所有浏览器用户界面和其它应用程序。

    一、接口使用(以谷歌浏览器为例)

    1.requestFullscreen()

    全屏请求方法,使用方法:

    <div id="example">
    <img src="html5.png">
    <button type="button" id="requestFullscreen">requestFullscreen</button>
    </div>
    <script>
      // 全屏
     document.getElementById('requestFullscreen').addEventListener('click', () => {
    document.querySelector('img').webkitRequestFullscreen();
    });
    </script>

    触发事件后会有按ESC即可退出全屏模式的文字提示。

    注意
    1.在< iframe >框架中使用全屏需要加 allowfullscreen 属性。
    2.全屏请求只能通过用户操作触发,否则会出现Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.这样的警告,解决办法是将此方法绑定到某个用户操作事件上,例如点击事件 click 。

    (function () {
       document.documentElement.webkitRequestFullscreen();
    })();

     2.exitFullscreen() 
    退出全屏模式的方法,使用方法: document.exitFullscreen() ,除了 requestFullscreen() 其它方法和属性都是基于 document 的。

    <div id="example">
    <img src="html5.png">
    <button type="button" id="requestFullscreen">requestFullscreen</button>
    <button type="button" id="exitFullscreen">exitFullscreen</button>
    </div>
    <script>
    // 退出全屏
    document.getElementById('exitFullscreen').addEventListener('click', () => {
    document.webkitExitFullscreen();
    });
    </script>

    触发后退出全屏恢复页面原来的样子,也可以按ESC退出;另外F11也可以使页面全屏显示和退出,但这应该属于浏览器的功能,不在HTML5 API的范畴之内。

     3.fullscreenElement 
    若是全屏模式下,显示全屏的元素,若不是,返回 null 。

    <div id="example">
    <img src="html5.png">
    <button type="button" id="requestFullscreen">requestFullscreen</button>
    <button type="button" id="exitFullscreen">exitFullscreen</button>
    <button type="button" id="fullscreenElement">fullscreenElement</button>
    </div>
    <script>
    // 显示全屏元素
    document.getElementById('fullscreenElement').addEventListener('click', () => {
    console.log(document.webkitFullscreenElement); // <div id=...></div> 或 null
    });
    </script>

    4.fullscreenEnabled 
    返回一个布尔值 true/false ,判断是否可用全屏模式。

    <div id="example">
    <img src="html5.png">
    <button type="button" id="fullscreenEnabled">fullscreenEnabled</button>
    </div>
    <script>
    // 全屏是否可用
    document.getElementById('fullscreenEnabled').addEventListener('click', () => {
    console.log(document.webkitFullscreenEnabled); // true
    });
    </script>

    二、浏览器兼容
    由于各主流浏览器调用全屏接口的方法不一致,所以调用之前需要判断一下当前浏览器适用的方法。

    我简单的做了下请求全屏和退出全屏的适配。

    const MAZEY_FULL_SCREEN = function () {
    let prefixArr = ['', 'webkit', 'moz', 'ms'], // 浏览器前缀
    isRightRequest, // 是否找到适配的方法
    isRightExit,
    requestMethod, // 全屏方法
    exitMethod, // 退出全屏方法
    lowerFirst = function (str) {
    return str.slice(0, 1).toLowerCase() + str.slice(1);
    },
    requestSuffixArr = ['RequestFullscreen', 'RequestFullScreen'], // 后缀
    exitSuffixArr = ['ExitFullscreen', 'CancelFullScreen'],
    searchRightMethod = function (prefix, suffixArr, documentParent) {
    let methodArr = suffixArr.map((suffix) => {
    return prefix + suffix;
    }),
    method,
    isRight;
    methodArr.forEach((wholePrefix) => {
    if (isRight) return;
    if (prefix.length === 0) {
    wholePrefix = lowerFirst(wholePrefix)
    }
    if (wholePrefix in documentParent) {
    method = wholePrefix;
    isRight = true;
    // console.log(method);
    }
    });
    return method;
    };
    prefixArr.forEach((prefix) => {
    if (isRightRequest && isRightExit) return;
    // 查找请求
    requestMethod = searchRightMethod(prefix, requestSuffixArr, document.documentElement);
    isRightRequest = Boolean(requestMethod);
    // 查找退出
    exitMethod = searchRightMethod(prefix, exitSuffixArr, document);
    isRightExit = Boolean(exitMethod);
    });
    this.request = function (element) {
    let domEle = document.querySelector(element) || document.documentElement;
    domEle[requestMethod]();
    };
    this.exit = function () {
    document[exitMethod]();
    };
    };
    
    let fullscreen = new MAZEY_FULL_SCREEN();
    使用示例:
    
    <h1 id="h1">html5 - 全屏</h1>
    <button id="request">请求</button>
    <button id="exit">退出</button>
    <script src="mazey-full-screen.js"></script>
    
    <script>
    // 请求全屏
    document.getElementById('request').addEventListener('click', () => {
    fullscreen.request();
    });
    // 退出全屏
    document.getElementById('exit').addEventListener('click', () => {
    fullscreen.exit();
    });
    </script>

    示例代码:GitHub
    ---------------------
    作者:mazeyqian
    来源:CSDN
    原文:https://blog.csdn.net/mazeyqian/article/details/78950577?utm_source=copy
    版权声明:本文为博主转载文章,转载请附上原文链接!

  • 相关阅读:
    MDX Step by Step 读书笔记(六) Building Complex Sets (复杂集合的处理) Filtering Sets
    在 Visual Studio 2012 开发 SSIS,SSAS,SSRS BI 项目
    微软BI 之SSIS 系列 在 SSIS 中读取 SharePoint List
    MDX Step by Step 读书笔记(五) Working with Expressions (MDX 表达式) Infinite Recursion 和 SOLVE_ORDER 原理解析
    MDX Step by Step 读书笔记(五) Working with Expressions (MDX 表达式)
    使用 SQL Server 2012 Analysis Services Tabular Mode 表格建模 图文教程
    MDX Step by Step 读书笔记(四) Working with Sets (使用集合) Limiting Set and AutoExists
    SQL Server 2012 Analysis Services Tabular Model 读书笔记
    Microsoft SQL Server 2008 MDX Step by Step 学习笔记连载目录
    2011新的开始,介绍一下AgileEAS.NET平台在新的一年中的发展方向
  • 原文地址:https://www.cnblogs.com/joyco773/p/9792170.html
Copyright © 2011-2022 走看看