跨浏览器窗口大小调整事件 - JavaScript / jQuery

IT技术 javascript jquery cross-browser resize
2021-01-31 01:29:24

进入适用于 Firefox、WebKit和 Internet Explorer的窗口调整大小事件的正确（现代）方法是什么？

你能打开/关闭两个滚动条吗？

6个回答

jQuery 有一个内置的方法：

$(window).resize(function () { /* do something */ });

对于用户界面的响应起见，你可以考虑使用的setTimeout只有经过数毫秒打电话给你的代码，如下面的例子，启发这样：

function doSomething() {
    alert("I'm done resizing for the moment");
};

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});
为什么使用按钮将窗口扩展到全屏时不会触发此事件？
2021-03-16 01:29:24
@Sly 对我来说，它适用于 Mac 上的 Safari、Chrome 和 Mozilla。你使用哪个浏览器？
2021-03-18 01:29:24
@狡猾： $('.button').on({ click: function(){ /* your code */ $(window).trigger('resize') })
2021-03-19 01:29:24
以利亚，这是 JavaScript。您写的内容不正确（使用 new 构建时的一种特定情况除外）。
2021-04-08 01:29:24
值得一提的是，这个 jQuery 函数“添加”了一个函数调用到当前应该在窗口大小调整时调用的函数列表。它不会覆盖当前在调整窗口大小时安排的现有事件。
2021-04-10 01:29:24 
$(window).bind('resize', function () { 

    alert('resize');

});
我更喜欢绑定方法，因为 resize() 方法实际上是完整绑定方法的快捷方式，而且我经常发现通常我应该将多个事件处理程序应用于一个元素。
2021-03-12 01:29:24
@Mike - 不仅如此，我猜测 resize 方法在您想要删除侦听器的情况下没有“取消绑定”方法。“绑定”绝对是要走的路！
2021-03-13 01:29:24

这是利用 resize 事件的非 jQuery 方式：

window.addEventListener('resize', function(event){
  // do stuff here
});

它适用于所有现代浏览器。它不是油门东西给你。这是它在行动中的一个例子。

@josinalvo 通常，当您在收听一个触发很多的事件时，您会希望对其进行去抖动（例如 lodash），这样就不会在程序中造成瓶颈。
2021-03-17 01:29:24
> 它不会为您限制任何东西。你能详细说明一下吗？它应该/会节流什么？它是否与连续多次触发的事件有关？
2021-03-31 01:29:24
此解决方案不适用于 IE。支持 IE dom 的固定版本： stackoverflow.com/questions/6927637/...
2021-04-03 01:29:24

很抱歉提出一个旧线程，但如果有人不想使用 jQuery，你可以使用这个：

function foo(){....};
window.onresize=foo;
请注意，这会破坏任何可能绑定到 window.onresize 的现有处理程序。如果您的脚本必须与其他脚本一起生活在一个生态系统中，您不应该假设您的脚本是唯一想要在窗口大小调整上做某事的脚本。如果您不能使用诸如 jQuery 之类的框架，您至少应该考虑获取现有的 window.onresize，并将您的处理程序添加到它的末尾，而不是完全破坏它。
2021-03-15 01:29:24
@TomAuger “您至少应该考虑获取现有的 window.onresize，并将您的处理程序添加到它的末尾” - 您的意思可能相反，即“在处理程序的末尾调用现有的处理程序”？我真的很想看到一个 javascript 代码，它会在现有函数的末尾添加一些东西:-)
2021-03-27 01:29:24
从某种意义上说，我明白您的观点 - 您的新 onResize 处理程序需要包装现有的 onResize。但是，在调用原始 onResize 处理程序之前，它不必调用您想要添加到 onResize 的函数。所以你仍然可以确保你的新 onResize 函数在原来的 onResize 函数之后执行，这可能比反过来要好。
2021-03-27 01:29:24

由于您对 jQuery 持开放态度，因此这个插件似乎可以解决问题。

其它你可能感兴趣的问题
上一篇捆绑程序不包括 .min 文件 下一篇如何在 React Router 4 中实现经过身份验证的路由？