`

js实现浏览器全屏

    博客分类:
  • js
阅读更多

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

1 element.requestFullScreen() 

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


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

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


退出全屏 
  document.cancelFullScreen() 


Document.fullScreen 

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

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

Java代码  收藏代码
  1. function fullScreen(element) {  
  2.   if(element.requestFullScreen) {  
  3.     element.requestFullScreen();  
  4.   } else if(element.webkitRequestFullScreen ) {  
  5.     element.webkitRequestFullScreen();  
  6.   } else if(element.mozRequestFullScreen) {  
  7.     element.mozRequestFullScreen();  
  8.   }  
  9. }  



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

Java代码  收藏代码
  1. // the helper function  
  2. function fullScreenCancel() {  
  3.   if(document.requestFullScreen) {  
  4.     document.requestFullScreen();  
  5.   } else if(document .webkitRequestFullScreen ) {  
  6.     document.webkitRequestFullScreen();  
  7.   } else if(document .mozRequestFullScreen) {  
  8.     document.mozRequestFullScreen();  
  9.   }  
  10. }  
  11.   
  12.   
  13. fullScreenCancel();  



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

Java代码  收藏代码
  1. $('html').on('click keypress''a', function(event) {  
  2.   
  3.   // 不响应真正的A HREF点击事件  
  4.   event.preventDefault();  
  5.   event.stopPropagation();  
  6.   
  7.   // Trigger fullscreen  
  8.   if (elementPrototype.requestFullscreen) {  
  9.     document.documentElement.requestFullscreen();  
  10.   } else if (elementPrototype.webkitRequestFullScreen) {  
  11.     document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
  12.   } else if (elementPrototype.mozRequestFullScreen) {  
  13.     document.documentElement.mozRequestFullScreen();  
  14.   } else {  
  15.     //  
  16.   }  
  17.   
  18.   //显示假的UI  
  19.   $('#menu, #browser').show();  
  20.   
  21.     
  22.   $('#target-site').show();  
  23. });  



  详细代码在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 

分享到:
评论

相关推荐

    js实现浏览器全屏兼容谷歌火狐等

    "js实现浏览器全屏兼容谷歌火狐等"这个主题就涉及到如何使用JavaScript来实现在不同浏览器上实现全屏功能,并确保与主流浏览器如Google Chrome和Mozilla Firefox等的兼容性。这里我们将详细讲解这一技术实现的原理和...

    iphone的safari浏览器中实现全屏浏览的方法

    在iPhone的Safari浏览器中实现全屏浏览可以让用户在查看网页内容时获得更沉浸式的体验。通常,Safari浏览器在浏览网页时会显示顶部的工具栏和底部的标签页栏,这占据了屏幕的一部分空间。全屏浏览则可以隐藏这些元素...

    用html5 js实现点击一个按钮达到浏览器全屏效果

    HTML5全屏API允许网页或应用在不使用...通过上述知识点,开发者可以实现点击按钮控制浏览器全屏显示,同时对全屏模式下的事件进行监听和样式自定义。这些知识点为实现全屏效果的网页和应用提供了技术基础和实现方法。

    实现浏览器全屏窗口的几种方法

    ### 实现浏览器全屏窗口的几种方法 在日常浏览网页的过程中,我们可能会遇到一种现象:浏览器的工具栏、菜单栏等界面元素消失不见,只留下网页的内容占据整个屏幕空间。这种全屏显示的效果不仅可以带来更加沉浸式的...

    浏览器全屏

    在本文中,我们将深入探讨浏览器全屏API、实现方法以及一些注意事项。 首先,浏览器全屏功能主要依赖于HTML5中的Fullscreen API。这个API为元素提供了进入和退出全屏模式的能力。全屏API包含以下核心方法: 1. `...

    Js浏览器全屏代码(模仿按F11)

    ### Js浏览器全屏代码(模仿按F11) #### 知识点概述 本文将详细介绍如何使用JavaScript实现浏览器全屏功能,类似于用户按下F11键的效果。此方法适用于需要临时进入全屏模式查看某些内容或者进行演示的情况。通过...

    浏览器全屏操作

    在本主题中,我们将深入探讨浏览器全屏API的使用,以及如何通过JavaScript实现全屏功能。我们还将分析提供的三个示例文件:`testauto.html`、`testFullscreen2.html`和`2.html`,它们可能是演示全屏操作的代码实例。...

    js实现网页全屏效果

    总结起来,实现JavaScript网页全屏效果主要涉及`Fullscreen API`的使用,包括`requestFullScreen`、`exitFullScreen`等方法以及对应的事件监听。结合jQuery库,我们可以方便地创建一个全屏插件,实现一键全屏切换...

    JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

    JavaScript控制浏览器全屏功能在现代Web开发中常常用于创建沉浸式体验,如全屏游戏、视频播放或虚拟现实应用。HTML5引入了全屏API,允许开发者通过JavaScript控制元素或整个页面进入和退出全屏模式。然而,由于...

    利用浏览器全屏api实现js全屏

    本文将详细介绍如何利用浏览器全屏API来实现JavaScript全屏功能。在实现全屏功能的代码示例中,主要使用了jQuery库。由于库的地址可能因项目部署而异,因此需要开发者将示例中的jQuery库地址替换成自己的。 首先,...

    js 特效 html 特效 浏览器全屏显示

    js 特效 html 特效 浏览器全屏显示 js 特效 html 特效 浏览器全屏显示

    vue实现浏览器全屏展示功能

    在Vue.js项目中,实现浏览器全屏展示功能是一项常见的需求,特别是在创建沉浸式用户体验或进行全屏演示时。在本示例中,开发者使用了`sreenfull`这个第三方插件来简化这一过程。以下是关于如何使用`sreenfull`插件在...

    unity 用安卓手机 打开webgl 浏览器全屏 显示模版

    可以添加或修改JavaScript代码以调用浏览器的全屏API。例如,使用`requestFullscreen()`方法可以让元素全屏显示。记得处理错误和退出全屏事件。 ```javascript document.getElementById('gameContainer')....

    Js方法打开网页全屏显示 模拟F11

    本篇文章将详细讲解如何通过JavaScript(JS)实现这一功能,并介绍四种不同的方法来达到全屏显示的效果。 ### 方法一:使用浏览器API `requestFullScreen` 现代浏览器提供了一个原生的全屏API,允许网页元素请求...

    javascript经典特效---浏览器全屏显示.rar

    在这个“javascript经典特效---浏览器全屏显示.rar”压缩包中,重点是介绍如何利用JavaScript来实现浏览器的全屏显示功能。全屏显示在现代网页设计中非常常见,比如在线视频播放、游戏或全屏幻灯片展示等场景,能够...

    js单页式全屏(去掉了浏览器操作栏)

    这是单页式全屏,类似考试系统弹窗出来的一样,没有浏览器的收藏、撤销、刷新、前进等操作,只能进行关闭和页面操作。 需要进入页面就执行的小伙伴把代码改为自执行即可,目前为了展示三个方法是点击触发的。

    JS实现全屏显示

    通过上述知识点的学习,我们可以了解到JS实现全屏显示不仅需要掌握基本的API使用方法,还需要注意浏览器的兼容性问题以及安全方面的考虑。正确地使用这些API可以显著提升用户的浏览体验,并为开发者提供更多可能性。

    浏览器全屏插件

    jquery全屏插件,带浏览器智能提醒功能,一键全屏,一键还原。兼容任何项目不占用加载空间

    javascript实现控制浏览器全屏

    本文将介绍如何使用JavaScript代码实现控制浏览器全屏的功能,并提供相应的代码示例。 首先,我们需要注意的是,不同的浏览器厂商对于全屏API的支持不同,因此在编写实现全屏功能的JavaScript代码时,需要考虑到...

Global site tag (gtag.js) - Google Analytics