檢查組件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