javascript - 绑定(bind)页面高度变化的事件

Question

每次页面高度发生变化时，我都需要执行一些 JavaScript。

到目前为止，我正在做一些相当丑陋的事情:每次我做一些可能改变页面高度的事情时，我都会使用回调。

// initial 
positionFooter();
$(window).resize(positionFooter);

...
// some code in some function 
$(this).hide(0, positionFooter);
...

...
// some code in some function 
$(this).show(0, positionFooter);
...

...
// some code in some function 
toggle(i,p.speed, positionFooter);
...

我想找到一种在页面高度发生变化时自动调用我的函数的方法。你有什么想法吗？

编辑:看来我的问题不清楚:某些事件(选项卡更改、ajax 加载新内容、切换事件等)不会触发调整大小功能。为了解决这个问题，我选择在每个事件发生后手动调用该函数。它工作得很好，但我觉得这个解决方案并不令人满意。如果有一种方法可以在一个地方捕获任何页面的高度变化，那就更干净了。

Answer 1

使用 Jquery，$(window).resize(function) 将在每次调整窗口大小时调用函数。

$(window).resize(function() {
   //Do something when the window is resized
}

如果您尝试更改 CSS，您可以像这样直接在 CSS 中使用媒体查询

@media only screen 
and (max-device-width : 1023px) {
/* Styles */
}

@media only screen 
and (min-device-width : 1024px) {
/* Styles */
}

Jquery.resize() Media Queries

如果这不能回答您的问题，请重新措辞或向我们提供有关您正在调用的函数/您正在测试的浏览器的更多信息。