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

标签: html5 fullscreen api | 发表时间:2013-03-15 20:48 | 作者:
出处:http://www.iteye.com
  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

 

已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [html5 fullscreen api] 推荐:

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

- - ITeye博客
  HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做. 全屏API,游戏呀,等都很有用.     作用:请求某个元素element全屏.   这里是将其中的元素ID去请求fullscreen.   如果用户在全屏模式下,则返回true.   返回当前处于全屏模式下的元素.

AT&T公布HTML5 Web应用API

- - HTML5研究小组
北京时间1月10日消息,据国外媒体报道,AT&T首席营销官大卫·克里斯托弗(David Christopher)今天在该公司第六届开发者峰会公布了面向HTML5应用的API(应用编程接口)平台API Catalog. HTML5应用可以在多种设备和移动操作系统上运行.   iPhone版Visual Voicemail将是AT&T的首款网络API.

HTML5全屏API之网络钓鱼

- - ria之家--RIA三部曲:jquery、ext、flex
全屏API(请参考 W3C docs和 MDN docs)允许web开发工程师使浏览器的可视区与用户屏幕区域大小一致. 像youtube上全屏观看视频的效果;或者在facebook上全屏观看图片. 其实现在大多数浏览器都有全屏功能,允许用户来设置或操作. 但HTML5的全屏API与之不同,HTML5的全屏API允许web开发工程师在程序中调用.

HTML5 Web Speech API,让网站更有趣

- - SegmentFault 最新的文章
Web API 变得越来越丰富,其中一个值得注意的是 Web Speech API. 传统的网站只能“说”,这个API的出现,让网站能“倾听”用户. 这个功能已经开放了一系列的用法,非常棒. 在这篇文章中,我们将看一下这项技术和建议的用法,以及如何用它来增强用户体验的一些好例子. 声明:本技术比较前沿,目前该规范是W3C的“非官方编辑器的征求意见稿”(截至2014年6月6日).

HTML5 API---使用WebAudio API播放音频文件

- - CSDN博客移动开发推荐文章
WebAudio API主要是为音频文件添加音效而设计的,但是它也可以用来播放音频文件,这类似于HTML5 audio元素的功能,只是audio元素可以有控制界面,用户可以点击界面上的播放/停止按钮来控制文件的播放,也可以拖动界面上的进度条来控制播放进度. 现在如果采用WebAudio来播放音频文件就不会有该限制,开发者可以任意控制音频文件的播放和停止,这对移动平台的上游戏开发者而言尤为重要.

HTML5基础,第3部分:HTML5 API的威力

- 大尾巴狼 - 译言-电脑/网络/数码科技
来源HTML5 fundamentals, Part 3: The power of HTML5 APIs. (译者注:由于yeeyan编辑器对文章中的标签做解析的原因,我在每个标签的空格,比如说,左尖括号<+head+右尖括号>,我会写成< head>,以便其能够在文章中正确显示,不便之处敬请谅解.

HTML5全屏API在FireFox/Chrome中的显示差异

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2679. 今天,在人人网上看同学晒得照片的时候,发现了这个按钮:. 我移了好几遍,没有 title提示. 图形也不具有代表性,一个圈圈意思是. 不敢点,点了不知道会发生什么,浏览器会不会关掉. 我思想斗争做了很久,终于弱弱地点了一下~~.

Filer.js:简化HTML5文件系统API开发的开源JS库

- - HTML5研究小组
在 W3C 的工作草案中,有一个雄心勃勃的底层 Web 标准开发计划即 HTML5 文件系统(Firesystem)API 规范. 所谓 Filesystm API 是一个提供在用户自定义的沙盒文件系统中读取与写入文件及目录的接口. 不过正如文件系统一样,该 API 代码较长而且复杂.   为此 Google Chorme 团队的工程师 Eric Bidelman 写了一个基于它的 JavaScript 包装库,Bidlelman 将其命名为 filer.js 并放在了 GitHub 上.

你可能不知道的5 个强大的HTML5 API

- - CSDN博客Web前端推荐文章
HTML5提供了一些非常强大的JavaScript和HTML API,来帮助开发者构建精彩的桌面和移动应用程序. 本文将介绍5个新型的API,希望对你的开发工作有所帮助.   1.   全屏API(Fullscreen API).   该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序.

操纵历史,利用HTML5 History API实现无刷新跳转

- - 蓝飞技术部落格
有一次在上点点网的时候,发现登陆、注册动画效果非常华丽,但让我感到震惊的是页面竟能够实现无刷新跳转(已改版,观看此效果可以猛击此处: GitHub或 阅FM),回顾了所学的前端知识,似乎没有任何技术可以实现这一点,于是百度搜罗了一下,才发现这原来是使用HTML5中History API实现的效果,但奈何一直未曾派上用场.