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

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

我发现window.resizeTo()可以触发函数，但是否有其他解决方案?

541982 次浏览
小开
最佳答案

在可能的情况下，我倾向于调用函数而不是分派事件。如果您可以控制想要运行的代码，那么这种方法效果很好，但如果您不拥有代码，请参阅下面的情况。

window.onresize = doALoadOfStuff;


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

在这个例子中，你可以调用doALoadOfStuff函数而不分派事件。

在现代浏览器中，你可以使用以下方法触发事件:

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

这在ie浏览器中是行不通的，在ie浏览器中，你必须进行手动操作:

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

使用jQuery，你可以尝试调用触发:

$(window).trigger('resize');
小开 
window.dispatchEvent(new Event('resize'));
小开

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

window.resizeBy(xDelta, yDelta)像window.resizeBy(-200, -200)一样被调用来将页面缩小200px * 200px。

小开

实际上，我不能让它与上面的任何一个解决方案一起工作。一旦我用jQuery绑定事件，它就可以正常工作，如下所示:

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

只是

$(window).resize();

是我用的…除非我误解了你的要求

小开

在IE上也可以工作的纯JS(来自@Manfred评论)

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

或者对于angular:

$timeout(function() {
var evt = $window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, $window, 0);
$window.dispatchEvent(evt);
});
小开

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

用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值可能是不正确的(分派纠正)

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

比如说Angular(我可以…)

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

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

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

提交答案