时间戳

首页 > 解决方案 > 如何在 Angular 5+ 项目的 index.html 页面中动态添加脚本标签？

angular - 如何在 Angular 5+ 项目的 index.html 页面中动态添加脚本标签？

问题描述

通过获取服务器端响应，我可以动态添加任何脚本标签。

标签： angulartypescript

解决方案

我不知道你的确切用例。但有时我们需要加载一些仅在某些工作流程中需要的脚本，而不是不必要地下载。

例如，我有一个银行应用程序，我只需要在少数情况下加载支付网关 SDK。因此，每当执行那部分代码时，我都会使用 javascript 函数

_loadScript(scriptSrcUrl, onLoadSuccessCallback, onErrorCallback) {
  if (scriptSrcUrl)
    if (document.querySelector('script[src="' + scriptSrcUrl + '"]')) {
      onLoadSuccessCallback();
    } else {
      var a = document.createElement('script');
      a.setAttribute('async', ''),
        (a.src = scriptSrcUrl),
        onLoadSuccessCallback && (a.onload = onLoadSuccessCallback),
        onErrorCallback && (a.onerror = onErrorCallback),
        document.head.appendChild(a);
    }
}

_scriptLoaded(result) {
    if(result) {
        // use the script
    } else {
        // handleError
    }
}


lazyLoadScriptsInDom() {
    this._loadScript(
        "https://checkout.razorpay.com/v1/checkout.js",
        this._scriptLoaded.bind(this, !0),
        this._scriptLoaded.bind(this, !1)
    );
}

推荐阅读