Answers:
在可能的情况下,我更喜欢调用函数而不是调度事件。如果您可以控制要运行的代码,则此方法效果很好,但是如果您不拥有该代码,请参阅以下内容。
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
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);
}
window.dispatchEvent(new Event('resize'));
trigger
实际上并不会触发本地的“调整大小”事件。它仅触发已使用jQuery添加的事件侦听器。以我为例,第3方库正在直接侦听本地的“调整大小”事件,这是对我有用的解决方案。
window.fireEvent
)
使用jQuery,您可以尝试调用trigger:
$(window).trigger('resize');
window.dispatchEvent(new Event('resize'));
没有
一个纯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);
});
Do not use this method anymore as it is deprecated.
的createEvent文档说“与createEvent使用的许多方法,如initCustomEvent,已被弃用。使用事件构造来代替。” 该页面看起来很有希望进行UI事件。
new Event()
方法。我认为,作为针对较旧浏览器的黑客,您可以执行if (Event.prototype.initEvent) { /* deprecated method */ } else { /* current method */ }
。当前方法是avetisk的答案。
结合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绑定,它就可以正常工作,如下所示:
$(window).bind('resize', function () {
resizeElements();
}).trigger('resize');
用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" >..
我相信这应该适用于所有浏览器:
var event;
if (typeof (Event) === 'function') {
event = new Event('resize');
} else { /*IE*/
event = document.createEvent('Event');
event.initEvent('resize', true, true);
}
window.dispatchEvent(event);
您可以使用此库执行此操作。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);
window.resizeBy()
将触发窗口的onresize事件。这在Javascript或VBScript中均有效。
window.resizeBy(xDelta, yDelta)
被称为window.resizeBy(-200, -200)
将页面缩小200px 200px。