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

Question

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

但是，我正在使用的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编写的框架。