JavaScript支持各种调整跨浏览器窗口大小的功能。为此，jQuery也有内置的方法来完成调整窗口大小的任务。jQuery是一个结构良好、功能齐全的JavaScript库，可以有效地执行JS代码。
在这篇文章中，有两种方法是基于JavaScript和jQuery来调整窗口的大小。在第一个方法中addEventListener()方法被用来提取调整浏览器窗口的宽度和高度。在第二个方法中，window.resize() 方法计算了浏览器被调整的次数。浏览器窗口可以根据用户的需要被最大化或最小化。
方法1：使用JavaScript调整窗口大小
在JavaScript中，addEventListener方法是通过传递**"resize "** 值来利用的。它通过最大化或最小化窗口返回 页面高度和页面宽度。当浏览器改变窗口的大小时，该事件被触发。此外，用户可以指定一个元素或选择器来调用窗口调整大小事件。所有最新的浏览器（Opera, Chrome, Edge, Safari等）都支持这个方法。
addEventListener()方法的语法（关于窗口大小的调整功能）提供如下。
语法
window.addEventListener('resize', function)
上述写法的语法可以描述为
addEventlistener方法与窗口的'resize'属性绑定。此外，如果检测到窗口的大小改变，该函数将被调用。
例子
下面的示例代码显示了JavaScript的addEventListener()方法的用法。
代码
<html><head><style>
div {
background-color: lightpink;
width: 40%;
} span { font-size: 20px;}</style>
<h2> Example of Resizing the Window </h2>
<div><span>Page Width = <span class="width"></span></span>
<span>Page Height = <span class="height"></span></span></div>
<script>
display();
window.addEventListener('resize', display);
function display() {
document.querySelector('.height').innerText = document.documentElement.clientHeight;
document.querySelector('.width').innerText =
document.documentElement.clientWidth;
}
</script> </head>
</body></html>
上述代码的描述在此说明:
- 用标签指定一个部分，其中提到了不同的造型属性，如背景颜色和宽度 。
- 之后，使用span 类显示当前窗口的页面宽度和 页面高度，span类用于表示内联内容。
- window.addEventListener() 方法是通过传递resize 值作为参数来触发的。
- 此外，一个display()方法在 标签内被调用。窗口的宽度和高度通过传递值.height和.width动态地更新。这些值是与HTML元素相关的。
输出
这里解释一下输出的情况:
- 首先用标题 标签显示一条信息。
- 最初，现有窗口的Page Width和 Page Height分别被设置为567和304 像素。
- Page Width 和Page Height的值会根据当前窗口的尺寸进行更新。
方法2：使用jQuery调整窗口的大小
jQuery的window.resize() 方法被用来提取浏览器的宽度和高度 。它返回的值显示了窗口通过最大化或最小化被调整了多少次。resize()方法的语法提供如下。
语法
$(window).resize()
窗口 元素代表调整大小的方法正在应用于窗口。你可以将任何函数作为参数传递给resize()方法。通过这样做，该函数将在调整窗口的大小时被执行。
例子
让我们通过下面的例子来理解这个概念。
代码
<html>
<body>
<h2>Example of resizing browser window.</h2>
<p>Resize the Window about <span>0</span> times.</p>
</body>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>var i = 1;
$(document).ready(function() {
$(window).resize(function() {
$("span").text(i += 1);
});});
</script></html>
在这段代码中:
- 首先，在标签内导入jQuery。
- 之后，一个变量i被初始化为1的值。
- 之后，利用document.ready()方法来检查文档是否准备好进行大小调整。
- 在这个方法中，window.resize() 方法被执行，使用$("span").text属性提取浏览器窗口的内容。
输出结果
输出显示了上述代码的执行情况。它显示了一个随着窗口屏幕大小而动态更新的值。它代表窗口调整大小的次数。
总结
JavaScript的addEventListener() 方法动态地报告调整窗口大小的高度和宽度。而jQuery的window.resize() 方法返回窗口被最大化或最小化的次数。你已经学会了两种不同的方法来检测使用jQuery和JavaScript的跨浏览器窗口大小调整事件。
