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

Question

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

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

Answer 1

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

Answer 2

在可能的情况下,我更喜欢调用函数而不是调度事件.如果您可以控制要运行的代码,则此方法很有效,但请参阅下面有关您不拥有代码的情况.

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);
}

Answer 3

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

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

Answer 4

一个也适用于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);
});

Answer 5

将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);
}

Answer 6

我实际上无法使用上述任何解决方案.一旦我用jQuery绑定事件,它就可以正常工作如下:

$(window).bind('resize', function () {
    resizeElements();
}).trigger('resize');

Answer 7

只是

$(window).resize();

是我用的......除非我误解你所要求的.