1. ホーム
  2. javascript

[解決済み] リモートのsrcを持つscriptタグを注入し、実行されるのを待つ

2023-07-30 22:58:24

質問

どのようにすれば <script src="https://remote.com/"></script> 要素を注入し、それが実行されるのを待ち、そしてそれが定義する関数を使用するにはどうしたらよいでしょうか?

参考:私の場合、スクリプトはまれにクレジットカードの処理を行うので、常に含めるわけではありません。 ユーザーが change-credit-card-options ダイアログを開き、新しいクレジットカード オプションを送信したときに、すばやくスクリプトを組み込みたいのです。

追加の詳細のために編集します。リモート スクリプトにアクセスすることはできません。

どのように解決するのですか?

あなたは Google Analytics または フェイスブック の方法です。

(function(d, script) {
    script = d.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.onload = function(){
        // remote script has loaded
    };
    script.src = 'http://www.google-analytics.com/ga.js';
    d.getElementsByTagName('head')[0].appendChild(script);
}(document));


UPDATEです。

下記は新しいFacebookメソッドです。 <head> :

(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)){ return; }
    js = d.createElement(s); js.id = id;
    js.onload = function(){
        // remote script has loaded
    };
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

  • 置き換え facebook-jssdk を一意のスクリプト識別子で置き換えることで、複数回追加されることを防ぎます。
  • スクリプトの URL を自分のものに置き換えます。