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

8 回答

• 47

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

  window.onresize = doALoadOfStuff;
  
  function doALoadOfStuff() {
      //do a load of stuff
  }
  

  在此示例中，您可以在不调度事件的情况下调用 doALoadOfStuff 函数 .

  在现代浏览器中，您可以trigger the event使用：

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

  这在Internet Explorer中不起作用，您必须在其中执行此操作：

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

  jQuery has the trigger method，其工作方式如下：

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

  回复于 2024-04-30T00:02:35+08:00
• 6

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

  回复于 2024-04-30T00:02:35+08:00
• 602

  使用jQuery，您可以尝试调用trigger：

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

  回复于 2024-04-30T00:02:35+08:00
• -3

  一个纯JS也适用于IE（来自@Manfred comment）

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

  回复于 2024-04-30T00:02:35+08:00
• 20

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

  回复于 2024-04-30T00:02:35+08:00
• 144

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

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

  回复于 2024-04-30T00:02:35+08:00
• 12

  只是

  $(window).resize();
  

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

  回复于 2024-04-30T00:02:35+08:00
• 277

  window.resizeBy() 将触发窗口的onresize事件 . 这适用于Javascript或VBScript .

  window.resizeBy(xDelta, yDelta) 调用如 window.resizeBy(-200, -200) 将页面200px缩小200px .

  回复于 2024-04-30T00:02:35+08:00