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

Check if external js script already in component Angular 2

本文关键字：组件 Angular 外部 js 脚本 是否 检查      更新时间：2023-09-26

我正在尝试在组件中动态加载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);
}
}

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

使用

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

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

或检查window.__google_recaptcha_client 的存在

相关文章：