检查组件Angular 2中是否已存在外部js脚本

Question

我正在尝试在组件中动态加载js脚本。

我有一个使用reCAPTCHA的联系组件，它的问题是每次用户访问该组件时都会加载外部脚本。

export class ContactCmp {

captchaReady = false;
constructor() {
}
ngOnInit() {
    if(){     //check if script is already loaded
        this.loadScript('https://www.google.com/recaptcha/api.js', this.captchaLoaded);
    }
    else{
        console.log("captcha is already loaded.")
    }
}
captchaLoaded(){
    console.log("Captcha loaded");
    this.captchaReady = true;
}

loadScript(url, callback)
{
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    script.onreadystatechange = callback;
    script.onload = callback;

    head.appendChild(script);
}

}

如何检查脚本是否已加载？

Answer 1

采用

document.querySelector('script[src="https://www.google.com/recaptcha/api.js"]'); 

测试脚本标记是否已经存在

或检查是否存在window.__google_recaptcha_client