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


327

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

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

Answers:


381

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

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具有triggermethod,其工作方式如下:

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

6
您的匿名功能是不必要的。window.onresize = doALoadOfStuff; 另外,这不能回答问题,下面的pinouchon答案是正确的答案。
丹尼斯·普卢西尼克

42
Google r:看看@avetisk的答案。
Fabian Lauer 2015年

1
分离是个好主意,但在我/这种情况下,它不起作用。仅仅调用resize方法是行不通的,因为如果未触发窗口调整大小,则其他各种div /容器将不会设置适当的高度。
PandaWood '16

@PandaWood-那么我的最后一个例子对您而言更好。
Fenton'6

谢谢@ user75525
Bondsmith

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

11
似乎可以与Chrome,FF,Safari一起使用,但不能:IE!
Davem M 2014年

14
jQuery trigger实际上并不会触发本地的“调整大小”事件。它仅触发已使用jQuery添加的事件侦听器。以我为例,第3方库正在直接侦听本地的“调整大小”事件,这是对我有用的解决方案。
chowey 2014年

2
简便的解决方案。虽然,我认为您应该为IE兼容性添加一些代码(据我所知,对于IE,我们必须使用window.fireEvent
Victor

35
这对我来说并不适用于所有设备。我必须像这样触发事件:var evt = document.createEvent('UIEvents'); evt.initUIEvent('resize',true,false,window,0); window.dispatchEvent(evt);
Manfred 2015年

19
它失败,“对象不支持此操作”在我的IE11
pomber

156

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

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

3
一个用例是当jQuery插件使用窗口调整大小事件来响应时,但是您的边栏折叠了。插件的容器被调整大小,但是窗口没有被调整。
isherwood 2014年

4
确实不需要JQuery,但我更喜欢JQuery解决方案,因为我的产品广泛使用JQuery。
斯里

加载后,将在何处添加此内容以调整wordpress页面的大小?
SAHM

在最新的Chrome浏览器中,这不适用于我,此答案可以:stackoverflow.com/a/22638332/1296209
webaholik

1
这就是我最初tried-它没有工作,但window.dispatchEvent(new Event('resize'));没有
user2682863

54

一个纯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);
});

4
不幸的是,文件UIEvent.initUIEvent()Do not use this method anymore as it is deprecated.createEvent文档说“与createEvent使用的许多方法,如initCustomEvent,已被弃用。使用事件构造来代替。” 该页面看起来很有希望进行UI事件。
赛车Ta

9
是的,但是IE11不支持该new Event()方法。我认为,作为针对较旧浏览器的黑客,您可以执行if (Event.prototype.initEvent) { /* deprecated method */ } else { /* current method */ }。当前方法是avetisk的答案
BrianS

@pomber感谢您的解决方案,实际上我正试图触发自定义事件以调整窗口大小以调整图表大小...您的解决方案可以节省我的一天
Dinesh Gopal Chand

49

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

1
这是在不使用jQuery的情况下跨浏览器执行此操作的好方法。
kgx

不知道为什么这不是最好的答案……这比被接受的“要么或”答案
要好

14

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

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

今天可以在Chrome浏览器中使用。
webaholik '18


0

用RxJS响应

像Angular一样说话

size$: Observable<number> = fromEvent(window, 'resize').pipe(
            debounceTime(250),
            throttleTime(300),
            mergeMap(() => of(document.body.clientHeight)),
            distinctUntilChanged(),
            startWith(document.body.clientHeight),
          );

如果需要手动订阅(或者不是Angular)

this.size$.subscribe((g) => {
      console.log('clientHeight', g);
    })

由于我的初始startWith Value可能不正确(请进行更正)

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

可以说Angular(我可以..)

<div class="iframe-container"  [style.height.px]="size$ | async" >..

0

我相信这应该适用于所有浏览器:

var event;
if (typeof (Event) === 'function') {
    event = new Event('resize');
} else { /*IE*/
    event = document.createEvent('Event');
    event.initEvent('resize', true, true);
}
window.dispatchEvent(event);

在Chrome和FF中效果很好,但在IE11中却不起作用
柯林斯

@Collins-感谢您进行更新,以为我已经在IE11上对此进行了验证...我将花一些时间来更新它,感谢您的反馈。
webaholik

0

您可以使用此库执行此操作。https://github.com/itmor/events-js

const events = new Events();

events.add({  
  blockIsHidden: () =>  {
    if ($('div').css('display') === 'none') return true;
  }
});

function printText () {
  console.log('The block has become hidden!');
}

events.on('blockIsHidden', printText);

-3

window.resizeBy()将触发窗口的onresize事件。这在JavascriptVBScript中均有效

window.resizeBy(xDelta, yDelta)被称为window.resizeBy(-200, -200)将页面缩小200px 200px。


2
为什么将其记下来?不对吗 是否依赖浏览器?
Peter Wone 2014年

2
这不适用于任何浏览器:Chrome,Firefox,IE,Firefox经过测试。
fregante

1
在大多数情况下,Firefox 7+和其他可能的现代浏览器不再允许调用此方法。另外,不希望实际调整窗口大小以触发事件。
user247702

在最新的稳定版Chrome版本中,resizeBy()和resizeTo()都可以正常工作。76.0
VanagaS
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.