我在窗口调整大小上注册了一个触发器。我想知道如何触发要调用的事件。例如,当隐藏div时,我希望调用我的触发器函数。
我发现window.resizeTo()
可以触发该功能,但还有其他解决方案吗?
答案 0 :(得分:627)
window.dispatchEvent(new Event('resize'));
答案 1 :(得分:305)
在可能的情况下,我更喜欢调用函数而不是调度事件。如果您可以控制要运行的代码,则此方法很有效,但请参阅下面有关您不拥有代码的情况。
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);
}
答案 2 :(得分:150)
使用jQuery,您可以尝试拨打trigger:
$(window).trigger('resize');
答案 3 :(得分:50)
也适用于IE的纯JS(来自@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 :(得分:12)
我实际上无法使用上述任何解决方案。一旦我用jQuery绑定事件,它就可以正常工作如下:
$(window).bind('resize', function () {
resizeElements();
}).trigger('resize');
答案 5 :(得分:6)
刚
$(window).resize();
是我使用的...除非我误解了你的要求。
答案 6 :(得分:0)
使用RxJS响应
像Angular一样说话
size$: Observable<number> = fromEvent(window, 'resize').pipe(
debounceTime(250),
throttleTime(300),
mergeMap(() => of(document.body.clientHeight)),
distinctUntilChanged(),
startWith(document.body.clientHeight),
);
如果需要手动订阅(或不成角度)
this.size$.subscribe((g) => {
console.log('clientHeight', g);
})
由于我的初始 startWith 值可能不正确(请进行更正)
window.dispatchEvent(new Event('resize'));
在说Angular(我可以..)
<div class="iframe-container" [style.height.px]="size$ | async" >..
答案 7 :(得分: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);
答案 8 :(得分: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);
答案 9 :(得分:-2)
window.resizeBy()
将触发窗口的onresize事件。这适用于Javascript或VBScript。
window.resizeBy(xDelta, yDelta)
调用window.resizeBy(-200, -200)
来缩小200px的页面200px。