javascript - Angular 7 - 加载外部脚本时使用 setInterval 的替代方法

Question

我从外部 javascript 文件获取应用程序的页眉和页脚。然后我需要将其转换为 HTML 并将其附加到 HTML 的 head 中。

private loadScript() {
const dynamicScripts = [this.appConfig.config.scriptDetails.headerUrl];

for (const ds of dynamicScripts) {
  const node = document.createElement('script');
  node.src = ds;
  node.type = 'text/javascript';
  node.async = false;
  document.getElementsByTagName('head')[0].appendChild(node);
}
this.setUIInterval = setInterval(() => {
  if (UniversalHeader) {
    const uhi = new UniversalHeader(this.uhConfig);
    const headerElements = document.getElementById('universalHeader').getElementsByTagName('a');
    this.newWindow(headerElements);        
    this.clearUIInterval();
  }
}, 100);
}

我在 onInit() 中调用 loadScript()。在这里，我使用 setInterval 来检查脚本是否已加载，然后将其附加到 header 。这里的问题是 setInterval 在脚本加载之前至少触发了 2 次。所以，我发现使用它不是一个好主意。有没有其他方法可以在不使用 setInterval 的情况下实现相同的效果？请建议。谢谢。

Answer 1

您可以使用脚本标记的onload事件。

loadScripts() {
  const dynamicScripts = [
    this.appConfig.config.scriptDetails.headerUrl
  ];

  const promises = dynamicScripts.map(url => this.loadScript(url));

  Promise.all(promises).then(() => {
    console.log('loaded');
  });
}

loadScript(url): Promise<any> {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    script.onload = () => {
      resolve();
    };

    script.onerror = (_: any) => {
      reject('error');
    };

    document.getElementsByTagName('head')[0].appendChild(script);
  });
}