用JavaScript使网页全屏显示_如何使网页全屏显示

时间: 2018-05-14阅读: 39标签: 网页

我们在写前端网页或者做前端小游戏的时候,为了提高用户体验,需要请求网页全屏显示(这点对于手机端的页游很重要),这个需求可以通过JavaScript实现。

我们要实现的效果如下:屏幕内除了网页没有任何其他信息。


我们首先要向浏览器发出请求,由于不同浏览器所提供的请求接口不同,我们把这些请求都罗列上,最终写出这样的一个函数:

function requestFullScreen(element) {  
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;  
    if (requestMethod) {  
        requestMethod.call(element);  
    } else if (typeof window.ActiveXObject !== "undefined") {  
        var wscript = new ActiveXObject("WScript.Shell");  
        if (wscript !== null) {  
            wscript.SendKeys("{F11}");  
        }  
    }  
}


接下来就是调用函数了,你可能想要页面加载进来就是全屏的,接下来你会用

onload(function () {  
    requestFullScreen(document.documentElement)  
})


这是不行的,浏览器一般规定,请求全屏的事件只能由用户发出,即是说用户可以通过点击事件实现全屏,也可以通过其他事件,但唯独onload这种,并非用户给出的事件,浏览器不认为是用户请求。

正确的方法是:

$('#unlock').click(function () {  
   requestFullScreen(document.documentElement);  
})


这样是允许的,至于怎样使网页实现好的效果,你可以在主页面之前加一个登录页面,点击登录实现全屏并移除登陆页。


示例:

<!DOCTYPE html>  
<html>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<body>  
<div style="margin:0 auto;height:600px;width:700px;">  
    <button id="btn">js控制页面的全屏展示和退出全屏显示</button>  
    <div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" >  
        <h1>js控制页面的全屏展示和退出全屏显示</h1>  
    </div>  
</div>  
</body>  
<script language="JavaScript">  
    document.getElementById("btn").onclick=function(){  
        var elem = document.getElementById("content");  
        requestFullScreen(elem);  
    };  
    function requestFullScreen(element) {  
        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;  
        if (requestMethod) {  
            requestMethod.call(element);  
        } else if (typeof window.ActiveXObject !== "undefined") {  
            var wscript = new ActiveXObject("WScript.Shell");  
            if (wscript !== null) {  
                wscript.SendKeys("{F11}");  
            }  
        }  
    }  
</script>  
</html>


来源:https://blog.csdn.net/ScapeD/article/details/80297743

html网页自动跳转方法_整理网页自动跳转的5种方法

网页自动跳转,是指当用户访问某个网页时,被自动跳转到另一个网页中去。网页自动跳转的主要作用是,当域名变更后,或者网站里的一个或多个网页被删除后,可以使用这种方式将用户引导到其它正常的网页中去,从而留住用户。

网页后缀html、htm、shtml、shtm有什么区别?

每一个网页或者说是web页都有其固定的后缀名,不同的后缀名对应着不同的文件格式和不同的规则、协议、用法,最常见的web页的后缀名是.html和.htm,但这只是web页最基本的两种文件格式,今天我们来介绍一下web页的其它一些文件格式。

理解大型分布式网站你必须知道这些概念

理解大型分布式网站你必须知道这些概念:1. I/O优化、2. Web前端调优、3.服务降级(自动优雅降级)、4.幂等性设计、5.失效转移、6.性能优化、7. 代码优化、8. 负载均衡、9.缓存等

网站开发需要哪些知识_网页开发你需要知道的6件事

开发网站之前,你需要知道哪些事情呢?每个开发者的答案可能都不太相同,这里整理为6个方面:界面和用户体验、安全性、性能(Performance)、搜索引擎优化、技术(Technology)、解决bug

如何嵌套一个网页html到另一个html中

在网页开发中,经常会遇到把一些通用内容的页面集中到一个页面中,需要使用这些页面只需要包含引入即可,这样有利于维护和修改,当通用页面修改时只需更改一个文件就可以了,不需要每个文件单独处理。

网页开发中利用CSS以图换字的多中实现方法总汇

CSS以图换字的技术,很久都没人提起了。它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡。本文将详细介绍CSS以图换字的9种方法

网页中文本朗读功能开发实现分享

同时针对大段的文本,不能整段的去读,要按照标点符号进行断句处理。重点当然就是先获取到当前标签上的文本,再把文本转化成语音即可。

html转义字符大全_网页html特殊符号,特殊字符查看对照表(整理)

HTML字符实体,在HTML中,某些字符是预留的。比如不能使用小于号(&lt;)和大于号(&gt;),这是因为浏览器会误认为它们是标签。