如何在 JavaScript 中触发窗口大小调整事件?

IT技术 javascript jquery events
2021-01-11 18:23:59

我已经在窗口调整大小上注册了一个触发器。我想知道如何触发要调用的事件。例如,当隐藏一个 div 时,我希望我的触发器函数被调用。

我发现window.resizeTo()可以触发该功能,但还有其他解决方案吗?

6个回答
window.dispatchEvent(new Event('resize'));
它在我的 IE11 中因“对象不支持此操作”而失败
2021-03-13 18:23:59
jQuerytrigger并没有真正触发原生的“调整大小”事件。它只触发使用 jQuery 添加的事件侦听器。就我而言,第 3 方库直接侦听本机“调整大小”事件,这是对我有用的解决方案。
2021-03-14 18:23:59
这对我来说不适用于所有设备。我不得不像这样触发事件: var evt = document.createEvent('UIEvents'); evt.initUIEvent('resize', true, false, window, 0); window.dispatchEvent(evt);
2021-04-02 18:23:59
伟大而简单的解决方案。虽然,我认为您应该为 IE 兼容性添加一些代码(据我所知,对于 IE,我们必须使用window.fireEvent
2021-04-06 18:23:59
似乎适用于 Chrome、FF、Safari,但不适用于:IE!
2021-04-10 18:23:59

在可能的情况下,我更喜欢调用函数而不是调度事件。如果您可以控制要运行的代码,这很有效,但请参阅下文了解您不拥有代码的情况。

window.onresize = doALoadOfStuff;

function doALoadOfStuff() {
    //do a load of stuff
}

在此示例中,您可以在doALoadOfStuff不分派事件的情况下调用该函数。

在现代浏览器中,您可以使用以下方法触发事件

window.dispatchEvent(new Event('resize'));

这在 Internet Explorer 中不起作用,您必须在其中进行常规操作:

var resizeEvent = window.document.createEvent('UIEvents'); 
resizeEvent.initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(resizeEvent);

jQuery 有trigger方法,它的工作原理是这样的:

$(window).trigger('resize');

并有警告:

尽管.trigger()模拟事件激活并带有合成的事件对象,但它并不能完美地复制自然发生的事件。

您还可以模拟特定元素上的事件...

function simulateClick(id) {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });

  var elem = document.getElementById(id); 

  return elem.dispatchEvent(event);
}
@PandaWood - 那么我的最后一个例子对你来说更好。
2021-03-18 18:23:59
你的匿名函数是不必要的。window.onresize = doALoadOfStuff; 此外,这并不能回答问题,下面皮诺雄的回答是正确的答案。
2021-03-21 18:23:59
Google r 的:看看@avetisk 的回答。
2021-03-23 18:23:59
非常感谢的伙伴。这真的很有帮助
2021-03-24 18:23:59
解耦是个好主意,但在我/这种情况下,它不起作用。仅调用 resize 方法不起作用,因为如果未触发窗口调整大小,则其他各种 div/容器将不会设置正确的高度。
2021-03-28 18:23:59

使用 jQuery,您可以尝试调用trigger

$(window).trigger('resize');
确实不需要 JQuery,但我更喜欢 JQuery 解决方案,因为我的产品广泛使用 JQuery。
2021-03-15 18:23:59
加载后将其添加到何处以调整 wordpress 页面的大小?
2021-03-22 18:23:59
一个用例是当 jQuery 插件使用窗口调整大小事件来响应时,但您有一个折叠的侧边栏。插件的容器被调整大小,但窗口没有。
2021-03-29 18:23:59
这是我最初尝试的 - 它没有用,但window.dispatchEvent(new Event('resize'));确实有效
2021-03-30 18:23:59
这在最新的 Chrome 中对我不起作用,这个答案是:stackoverflow.com/a/22638332/1296209
2021-03-31 18:23:59

结合 pomber 和 avetisk 的答案来覆盖所有浏览器并且不会引起警告:

if (typeof(Event) === 'function') {
  // modern browsers
  window.dispatchEvent(new Event('resize'));
} else {
  // for IE and other old browsers
  // causes deprecation warning on modern browsers
  var evt = window.document.createEvent('UIEvents'); 
  evt.initUIEvent('resize', true, false, window, 0); 
  window.dispatchEvent(evt);
}
这是在不使用 jQuery 的情况下跨浏览器执行此操作的好方法。
2021-03-25 18:23:59
不知道为什么这不是最佳答案......这比接受的“非此即彼”的答案要好......
2021-03-27 18:23:59

一个也适用于 IE 的纯 JS(来自@Manfred 评论

var evt = window.document.createEvent('UIEvents'); 
evt.initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(evt);

或者对于角度:

$timeout(function() {
    var evt = $window.document.createEvent('UIEvents'); 
    evt.initUIEvent('resize', true, false, $window, 0); 
    $window.dispatchEvent(evt);
});
不幸的是,文件UIEvent.initUIEvent()Do not use this method anymore as it is deprecated.createEvent文档说“与createEvent使用的许多方法,如initCustomEvent,已被弃用。使用事件构造来代替。” 这个页面看起来很有希望用于 UI 事件。
2021-03-12 18:23:59
是的,但 IE11 不支持该new Event()方法。我认为作为对旧浏览器的黑客攻击,您可以执行类似if (Event.prototype.initEvent) { /* deprecated method */ } else { /* current method */ }. 当前方法是avetisk 的答案
2021-03-26 18:23:59
@pomber 感谢您的解决方案,实际上我试图触发窗口调整大小的自定义事件以调整我的图表大小...您的解决方案拯救了我的一天
2021-04-03 18:23:59