Question

我有一个简单的代码，通过点击显示窗口的实际大小（宽度和高度），但我想这样做而不点击，例如当我改变窗口大小我想自动更改大小并显示。感谢。

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">show the window size</button>
<p id="demo"></p>
<script>
function myFunction() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h;
}
</script>
</body>
</html>

Answer 1

你可以这样做。

window.onresize = myFunction;

Answer 2

只需为此

添加以下功能

window.onresize = function(event) {
    myFunction();
};

Answer 3

你可以试试这个

window.addEventListener('resize',myFunction)

DEMO

Answer 4

由于您在此帖子中标记了jQuery，我将假设您在页面中使用它。

理想情况下，每次触发窗口调整大小事件时，您都不想激活您的函数，但是在调整大小完成后。这涉及使用去抖功能......

世界上有多种实现方式（例如the debounce from underscore.js），但这里有一个简单的实现方法可以解决这个问题：

var resizeTimer;
$(window).on('resize', function(e) {    
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {    
    myFunction(); // call your function             
  }, 250); // in this case 250 milliseconds between events is required
})
.resize(); // call the resize event on page load to get your initial values

如何自动显示实际窗口大小（宽度和高度）？

4 个答案: