zoukankan      html  css  js  c++  java
  • HTML5全屏API

      现在大多数浏览器都有全屏功能,允许用户来设置或操作。但HTML5的全屏API与之不同,HTML5的全屏API允许web开发工程师在程序中调用。
    这样,web开发工程师就可以再网站中设计一个按钮,当该按钮被点击时就让浏览器进入全屏模式。(就像youtube和facebook那样)

         全屏代码如下:
    // Assuming jQuery is available
     
    // Fullscreen the HTML document on click
    $('#fullscreen-button').on('click', function() {
        var doc = document.documentElement;
        if (doc.requestFullscreen) {
            doc.requestFullscreen();
        }
    });
     
         当然这个api还只是草案,所以在应用中,需要加上前缀(mozRequestFullScreen() 和webkitRequestFullScreen())
        
         怎么实现网络钓鱼攻击
           首先,创建一个链接:<a href="https://www.bankofamerica.com">美国银行</a>
         注意,当用户鼠标滑过该连接时,浏览器状态栏显示的是正常的链接地址。但是当用户点击时,程序中会调用 event.preventDefault()来阻止浏览器默认跳转事件。取而代之的是触发全屏,进入全屏模式,展现一个仿制的带有相应的操作系统和浏览 器ui界面的假冒网站。
         另外:该连接只有正常点击才会生效,如果右键“在新窗口打开”或鼠标中建点击是会正常跳转的。
        
    $('html').on('click keypress', 'a', function(event) {
    
        // 阻止默认行为及冒泡
        event.preventDefault();
        event.stopPropagation();
     
        // Trigger fullscreen
        if (element.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (element.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else {
            // fail  nothing todo
        }
     
        // Show fake OS and browser UI
        $('#menu, #browser').show();
     
        // Show fake target site
        $('#target-site').show();
    
    });
     
     
  • 相关阅读:
    AtCoder Grand Contest 019
    upd 2020.10.31
    ubuntu 自动配置脚本
    linux下gcc、g++不同版本的安装和切换
    fixes for 100% disk usage on Windows 10
    简单聊聊VisualStudio的断点调试
    运算符重载
    设计模式之桥接模式
    使用C#进行数据库增删改查ADO.NET(三)
    使用C#进行数据库增删改查ADO.NET(二)
  • 原文地址:https://www.cnblogs.com/rsky/p/4847037.html
Copyright © 2011-2022 走看看