使用javascript实现浏览器全屏

HTML 5中的full screen，目前可以在除IE和opera外的浏览器中使用，有的时候用来做
全屏API，游戏呀，等都很有用。先看常见的API

1 element.requestFullScreen()

作用：请求某个元素element全屏

2
Document.getElementById(“myCanvas”).requestFullScreen()

这里是将其中的元素ID去请求fullscreen

3
退出全屏
document.cancelFullScreen()

4
Document.fullScreen

如果用户在全屏模式下，则返回true
5 document.fullScreenElement
返回当前处于全屏模式下的元素

下面的代码是开启全屏模式：

function fullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}

下面的代码就是整个页面调用全屏模式
var html = document.documentElement;
fullScreen(html);
下面的则是对指定元素，比如
var canvas = document.getElementById('mycanvas');
fullScreen(canvas);
如果要取消，同样：

// the helper function
function fullScreenCancel() {
if(document.requestFullScreen) {
document.requestFullScreen();
} else if(document .webkitRequestFullScreen ) {
document.webkitRequestFullScreen();
} else if(document .mozRequestFullScreen) {
document.mozRequestFullScreen();
}
}
fullScreenCancel();

不过老实说，FULL SCREEN有个问题，容易造成欺骗，比如在
http://feross.org/html5-fullscreen-api-attack/中，其中就有一个很好的DEMO，
去欺骗了，比如某个链结写的是http://www.bankofamerica.com,大家以为是美国银行，
一点进去，因为使用了全屏幕API，就会欺骗到人

$('html').on('click keypress', 'a', function(event) {
// 不响应真正的A HREF点击事件
event.preventDefault();
event.stopPropagation();
// Trigger fullscreen
if (elementPrototype.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (elementPrototype.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elementPrototype.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else {
//
}
//显示假的UI
$('#menu, #browser').show();
$('#target-site').show();
});

详细代码在https://github.com/feross/fullscreen-api-attack可以下载
老外也提到了：
Browser vendors are well aware of the potential security issues with fullscreen. For example, a malicious site could show a full screen Windows or Mac login window and steal a password. That’s why they are disabling keyboard support by default and only enabling by explicitly asking. — John Dyer

转载于:https://www.cnblogs.com/telwanggs/p/7112136.html

使用javascript实现浏览器全屏相关推荐

JavaScript 控制浏览器全屏展示
JavaScript 控制浏览器全屏展示前言一.全屏区分二.HTML Dom 全屏模式展开全屏退出全屏三.兼容 IE 10 及以下方式 DEMO 总结前言浏览器全屏功能解释一.全屏 ...
html 设置浏览器全屏显示,JavaScript控制浏览器全屏显示简单示例
本文实例讲述了JavaScript控制浏览器全屏显示.分享给大家供大家参考,具体如下: www.jb51.net JS全屏显示全屏显示退出全屏 // 判断各种浏览器,找到正确的方法 functio ...
html控制浏览器全屏,JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件_javascript技巧...
HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
项目中做过大屏展示功能,其中需求是需要全屏展示,正好HTML 5中的full screen满足需求,在此记录下. HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ...
html5实现浏览器自动全屏,[JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有g ...
html5ppt预览插件,jQuery高性能跨浏览器全屏幻灯片特效插件
Nex是一款效果炫酷的.高性能的跨浏览器全屏幻灯片特效jQuery插件.该幻灯片插件允许你嵌入图片.视频,甚至是谷歌地图.该幻灯片提供了7组共34种不同的效果,可以使你适用于任何场景下使用.它的特点有 ...
浏览器全屏和pc显示器全屏
浏览器全屏 <body style="background-color: #000"><Div id="DivLocker" >< ...
jquery实现浏览器全屏和浏览器退出全屏
2019独角兽企业重金招聘Python工程师标准>>> js方法如下: /** 浏览器全屏*/ function fullScreen() {var el = document.do ...
js 实现各浏览器全屏
现代浏览器包括ie11,可以直接用h5的全屏api实现低版本的IE需要通过ActiveX插件实现: //直接上代码 <!DOCTYPE html> <html><hea ...

使用javascript实现浏览器全屏

使用javascript实现浏览器全屏相关推荐

最新文章

热门文章