html监控页面大小,JQuery实时监控窗口大小(无需插件)

前篇文章介绍了《JQuery监控浏览器调整大小(使用resizeEnd插件)》，这个方法需要使用一个插件(resizeEnd)，本文将介绍JQuery实时监控窗口大小的另一种方法，这个方法不需要插件，是纯JQuery实现，比使用插件的方法更简单。

代码使用介绍

1、插件调用

在html代码

里调用如下JQuery文件：

JQuery文件建议使用百度公共库文件，你也可以把此文件下载到自己网站某目录下，然后调用它。

2、JQuery代码

window.onload = function(){

$('.test').text($(window).width() + "x" + $(window).height());

};

(function($) {

$(window).on('resize', function() {

/* 这里添加执行代码 */    $('.test').text($(window).width() + "x" + $(window).height());

});

})(jQuery);

JQuery代码主要是使用了 resize 方法：$(window).on('resize', function() { } ，通过此方法实时监控窗口的大小。

完整HTML实例代码

JQuery resize

body,

html {

margin: 0;

padding: 0;

}

body