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

Question

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

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

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

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

Answer 1

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

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

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

两种解决方案都是骇人听闻的。 最好的解决方案可能是考虑使用其他组件。 一个不依赖其他框架或为Angular编写的框架。