`

HTML5 中fullscreen 中的几个API和fullscreen欺骗

阅读更多
  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

 
2
1
分享到:
评论

相关推荐

    [AIR] - ANE - FullScreen (+Interactive Fullscreen)

    在这个特定的ANE中,"FullScreen"功能意味着应用能够占据整个设备屏幕,去除状态栏和导航栏,从而提供更纯净、无干扰的视觉体验。在Android上,实现全屏模式通常涉及到调整Activity的窗口属性,比如设置FLAG_...

    vue-fullscreen-master.zip

    在"vue-fullscreen-master.zip"这个压缩包中,包含的是Vue-fullscreen的源代码和相关资源。解压后,我们可以看到主要的文件和目录结构,它们可能是: 1. `src/` - 存放源代码,包括Vue组件的核心实现。 2. `dist/` ...

    jQuery-FullScreen-master 全屏操作

    在jQuery-FullScreen-master中,开发者利用jQuery的灵活性和易用性创建了一个方便的全屏API,使得全屏操作变得更加简单。 1. **全屏API的理解**: 在HTML5中,提供了全屏API,允许元素以全屏模式显示。这个API包括...

    HTML5全屏(Fullscreen)API详细介绍

    FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态. 在线演示Demo: Fullscreen API Example (在此Demo中,可以...

    Web开发者的最爱5个超实用的HTML5API.pdf

    本文将详细介绍5个超实用的HTML5 API,它们分别包括Fullscreen API、Page Visibility API、getUserMedia API以及和元素的应用。这些API的出现,极大地方便了Web开发者在进行多媒体、图形处理、视频捕捉等方面的开发...

    MyEclipse可用fullscreen插件

    5. 升级和卸载插件:随着时间推移,fullscreen插件可能会有新版本发布,提供更多的功能或优化性能。你可以通过MyEclipse的"Check for Updates"功能来更新插件。如果不再需要该插件,可以将其从"dropins"目录删除,...

    FullScreen

    在IT行业中,全屏显示是许多应用程序中常见的一种功能,特别是在游戏、多媒体软件以及演示文稿等场景下。本文将详细探讨如何在Delphi编程环境中实现全屏显示程序界面,无需用户进行额外的设置。 首先,Delphi是一款...

    HTML5 video播放器全屏(fullScreen)方法实例.docx

    为了实现全屏功能,HTML5定义了两个API:`requestFullscreen()` 和 `exitFullscreen()`。这两个方法分别用于进入和退出全屏模式。需要注意的是,这些方法必须在用户的交互事件(如点击按钮)触发后执行,因为浏览器...

    eclipse 全屏插件 fullscreen

    eclipse 全屏插件 fullscreen 获得更多编辑空间

    前端项目-lg-fullscreen.zip

    5. **扩展性**:LightGallery提供了丰富的API和事件,允许开发者进行深度定制,添加额外的功能或者与其他库集成。 6. **动画效果**:滑动、淡入淡出等多种平滑过渡效果,使得图片和视频切换更加流畅自然。 7. **...

    fullscreen.js.zip

    fullscreen.js 是一个用来实现全屏的照片展示的 jQuery 插件,使用全屏 API,支持浏览器包括:Firefox 10 and Chrome 15 (还可能有 Safari 5.1 ). 标签:fullscreen

    jQuery Textarea全屏插件Textarea Fullscreen

    在这个示例中,`#fullscreen-textarea`是应用全屏插件的textarea,而`#fullscreen-btn`是一个按钮,用于手动切换全屏模式。通过`.toggleClass()`方法,我们可以轻松地在全屏和非全屏状态之间切换textarea。 值得...

    HTML5 video播放器全屏(fullScreen)方法实例

    在上述代码实例中,我们看到如何实现一个简单的HTML5视频播放器,并添加了一个全屏按钮。 首先,HTML部分定义了一个包含`<video>`元素和一个`<button>`元素的容器。`<video>`元素包含了多个`<source>`标签,用于...

    fullscreen:全屏API标准

    人们一直注意到Fullscreen API标准存在较小和较大的问题,我们很乐意为您解决这些问题。 也欢迎出现印刷和语法错误的请求请求。 我们很乐意指导您完成此过程。 如果您有兴趣并且需要入门帮助,请对该问题发表评论或...

    kodi-fullscreen-dual-monitor:在双监视器设置(Linux)中的一台监视器上全屏运行XBMC

    如果您只是想防止Kodi在全屏模式下运行时跨多个监视器伸展,则可以使用SDL_VIDEO_FULLSCREEN_HEAD环境变量,该变量可用于选择全屏模式下使用的屏幕SDL_VIDEO_FULLSCREEN_HEAD=0 /usr/bin/kodi -fs

    MFC-fullScreen.rar_FullScreen M_MFC_MFC 全屏 程序_MFC 全屏显示

    开发者可以研究这个源代码,了解具体的实现细节,如如何在MFC的框架中调用以上提到的API和方法,以及如何在不同场景下适当地切换全屏模式。 总之,通过学习和理解这个全屏MFC程序,开发者可以掌握如何利用MFC库的...

    libgdx FullScreen&vsync

    在这个主题中,我们主要探讨的是LibGDX中的全屏模式(FullScreen)和垂直同步(VSync)功能,这两个特性对于游戏性能和用户体验至关重要。 全屏模式(FullScreen)在游戏开发中常常被用到,因为它能提供更好的沉浸...

Global site tag (gtag.js) - Google Analytics