JavaScript浏览器全屏插件和jQuery元素大小调整插件

1 摘要

一些酷炫的网站需要对浏览器或者DOM元素进行自动或触发全屏化。对于浏览器全屏，通常浏览器都有提示用户按F11，这样会使浏览器全屏。相比于键盘，鼠标似乎更有效率和更符合我们的习惯。所以，今天介绍的screenfull.js插件解决了这个问题。该插件不仅对浏览器，而且对单个元素也可以进行全屏操作。
然而，浏览器全屏又是一个事件，利用该事件我们也可以做一些事情，jQuery中提供了resize()方法来响应该事件。但是，该方法有一个问题：resize事件是在窗口或框架的大小被调整时发生，包括最小化、最大化。在IE和Opera浏览器中，只要窗口边框被拖动，就触发该事件，在Mozilla浏览器中，resize 事件只是在停止改变窗口大小时才会触发。为了解决更好地兼容不同浏览器，让页面更加平滑，jquery.ba-resize.js插件则弥补了jQuery.resize()方法的不足。

2 插件介绍

2.1 screenfull.js

screenfull.js是对跨浏览器使用JavaScript全屏API进行简单的封装，它可以让你把网页或任何元素进入全屏。你也不必自己实现来平滑不同浏览器之间的差异，因为screenfull.js已帮你实现。

• 项目主页： https://github.com/sindresorhus/screenfull.js
• Bootstrap CDN： http://cdn.bootcss.com/screenfull.js/2.0.0/screenfull.js
• 支持的浏览器： http://caniuse.com/fullscreen
• 原生JS代码，不需要依赖任何库

// 实例代码
// 利用按钮，对整个页面进行全屏或退出操作
$("#button").click(function(){
    if(screenfull.enabled){
        // 仅仅只进行全屏而不退出全屏可以调用
        // screenfull.request() 方法。
        screenfull.toggle();
    }else {
        // Ignore or do something else
    }
});
// 对单个元素进行全屏操作
// 注意 screenfull.js是用原生的js写的
// 所以每个函数输入的参数也必须是js对象
// 可以利用jQuery中数组下标来获取对应的js对象
$("#div_button").click(function(){
    if(screenfull.enabled){
        screenfull.toggle($("#div")[0]);
    }else {
        // Ignore or do something else
    }
});

2.2 jquery-resize

利用 jQuery 的 resize 事件，现在你可以将大小调整事件的操作者绑定到除了 window 之外的任何元素，然后就会显示非常赞的效果。

• 项目主页： http://benalman.com/projects/jquery-resize-plugin/
• Bootstrap CDN： http://cdn.bootcss.com/jquery-resize/1.1/jquery.ba-resize.js
• 非原生，需要依赖jQuery

// 监听窗口大小调整事件，每次窗口改变大小就触发该事件
$(window).resize(function(){
    var elem = $(this);
    // 更新窗口宽度和高度
    // 可以替换这段代码，做一些有用的事情
    $('#window-info').text( 'window width: ' + elem.width() + ', height: ' + elem.height() );
});