时间戳

首页 > 解决方案 > 为 Angular 组件动态加载外部 Javascript 并触发 window.load

angular - 为 Angular 组件动态加载外部 Javascript 并触发 window.load

问题描述

我有一个外部 javascript 文件，我只想包含在特定组件中，所以我动态加载它。这个答案描述了如何做到这一点。

但是，我使用的 javscript 文件在 window.load 上做了一些事情：

$(window).on('load', function() {
    //Some logic
});

因为我正在为特定组件动态加载这个脚本，所以这个逻辑永远不会触发，因为 load 事件在脚本加载之前很久就触发了。加载脚本后如何执行此逻辑？

标签： angulartypescript

解决方案

加载脚本后，您必须触发该window.load事件。唯一的问题是，绑定到该事件的脚本可能会产生副作用，并且（正确地）确实预期该事件会多次发生。

const evt = document.createEvent('Event');  
evt.initEvent('load', true, true);  
window.dispatchEvent(evt);

或者，由于您似乎对该脚本的工作方式有深入的了解，您可以考虑重新创建在窗口加载后发生的代码。这应该减轻由重新触发加载事件引起的副作用。

任何一种解决方案都是 hacky。可能最好的解决方案是考虑使用不同的组件。一种不依赖于其他框架或为 Angular 编写的。

推荐阅读