极客教程使用JavaScript/jQuery的跨浏览器窗口调整事件
resize()方法是jQuery的一个内置方法，当浏览器窗口改变其大小时使用。resize()方法触发调整大小的事件或附加一个函数在调整大小的事件发生时运行。jQuery有一个内置的方法用于窗口调整大小事件。
语法:
$(selector).resize(function)
这种语法用于跨浏览器调整大小事件。
实例1：本例使用resize()方法来计算浏览器窗口大小的次数。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
var x = 1;
(document).ready(function() {
(window).resize(function() {
$("span").text(x += 1);
});
});
</script>
</head>
<body>
<p>Window resized <span>0</span> times.</p>
<p>Try resizing your browser window.</p>
</body>
</html>
输出:
- 在调整浏览器窗口大小之前。
- 调整浏览器窗口大小后。
你可以使用addEventListener()方法来注册一个事件处理程序来监听浏览器窗口调整大小的事件，例如window.addEventListener(‘resize’, …)。
语法:
object.addEventListner("resize", myscript);
例子2：这个例子显示调整窗口的大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Window Resize Event</title>
</head>
<body>
<div id="result"></div>
<script>
// Defining event listener function
function displayWindowSize() {
// Get width and height of the window
// excluding scrollbars
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
// Display result inside a div element
document.getElementById("result").innerHTML
= "Width: " + w + ", " + "Height: " + h;
}
// Attaching the event listener function
// to window's resize event
window.addEventListener("resize", displayWindowSize);
// Calling the function for the first time
displayWindowSize();
</script>
<p>
<strong>Note:</strong> Please resize the browser
window to see how it works.
</p>
</body>
</html>
输出:
- 在调整浏览器窗口大小之前。
- 调整浏览器窗口大小后。
