Check if external js script already in component Angular 2

Question

I'm trying to load js script dynamically in my component.

I have a contact component which uses reCAPTCHA, the problem with it that everytime the user visits the component, the external script loads.

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);
}

}

How can I check if the script is already loaded?

if it's cached, which i'm sure google will make sure it is, then it should load right away anyway... — dandavis
– dandavis, Commented Jan 9, 2016 at 3:47

Jaromanda X · Accepted Answer · 2016-01-09 03:49:56Z

2

use

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

to test if the script tag already exists

or check for the existence of window.__google_recaptcha_client

edited Jan 9, 2016 at 3:49

answered Jan 9, 2016 at 3:44

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Murhaf Sousli Over a year ago

thanks this is what I needed if(!window['__google_recaptcha_client'])

Collectives™ on Stack Overflow

Check if external js script already in component Angular 2

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related