前篇文章介绍了《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 {

background-color: #69D2E7;

font-size: 16px;

font-family: 'Lato', sans-serif;

color: #fff;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);

}

h1, h2, h3, h4 {

font-weight: 300;

}

.main-wrapper {

padding: 50px;

margin-left: 200px;

}

.site-title {

font-size: 36px;

line-height: 1;

}

.window {

background-color: rgba(255, 255, 255, 0.5);

border: 1px solid #fff;

padding: 25px;

border-radius: 5px;

display: inline-block;

text-align: center;

width: 400px;

}.window h3 {

height: 24px;

font-size: 24px;

color: #54636E;

}

jQuery Resize

调整您的浏览器窗口大小，
下方显示窗口大小：

window.onload = function(){

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

};

(function($) {

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

/* 这里添加执行代码 */

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

});

})(jQuery);

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

自带的jvm监控不准_如何实时监控 Flink 集群和作业？
Flink 相关的组件和作业的稳定性通常是比较关键的,所以得需要对它们进行监控,如果有异常,则需要及时告警通知.本章先会教会教会大家如何利用现有 Flink UI 上面的信息去发现和排查问题,会指明一 ...
python实时监控文件大小_python实现实时监控文件的方法
在业务稳定性要求比较高的情况下,运维为能及时发现问题,有时需要对应用程序的日志进行实时分析,当符合某个条件时就立刻报警,而不是被动等待出问题后去解决,比如要监控nginx的$request_time和 ...
linux 系统可视化工具实时监控_Linux上的实时监控平台-你需要这样做
应朋友们要求,介绍上Linux系统下的实时监控平台,在上次提到了glances,它提供了较多的监控指标,那如果我们要看历史数据呢?某一时间段的回放呢?显然glances是做不到的.因此,实时监控平台就 ...
监控属于计算机应用的,实时监控
英文缩写:RTA,一般是指利用软件对系统运行的过程进行同步的监控,比如:杀毒软件对计算机内存监控并调用系统文件的一种操作模式.由于病毒的存在,程序将在对象访问之前对它进行扫描,如果发现病毒,应用程序会 ...
html实现ezuikit.js萤石云直播监控，ezuikit.js实时监控实现，萤石云实时监控简单实现
效果图实现下面方式一的播放url获取:登录萤石云->控制台->我的资源->设备列表->列表中:查看通道->监控地址下面方式二的播放url获取:登录萤石云->控 ...
jquery实时监控屏幕宽度
方法1: $(window).resize(function(){ // 监控窗口宽度变化if( $(window).width() < 1330 ) { // 屏宽1330触发$(" ...
每次页面大小更改实时获取屏幕宽度
<script> (function () {function w() {var all = document.documentElement; //获取html元素var test = ...
浏览器页面操作——实时监控网页变化，读取网页内容
浏览器页面操作功能介绍浏览器页面操作是集简云的一款免费内置应用,它可以定时监控网页变化,精准捕捉所需信息.一键设置指定网页与元素,全自动监测并即时推送通知,助您在第一时间了解网页最新情况,让您更高效 ...
云和恩墨 oracle 监控,产品速递 | 云和恩墨Bethune Pro2——数据库实时监控和智能巡检平台...
运维工程师负责企业IT系统的日常维护工作,包括每日的系统巡检,日常的系统健康信息监控. 通过使用 Bethune Pro2,工程师可以通过每日巡检建议,快捷的感知各个数据库中存在的隐患与风险点.同时, ...

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

jQuery Resize

调整您的浏览器窗口大小，
下方显示窗口大小：

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

最新文章

热门文章

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

jQuery Resize

调整您的浏览器窗口大小， 下方显示窗口大小：

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

最新文章

热门文章

调整您的浏览器窗口大小，
下方显示窗口大小：