web-dev-qa-db-ja.com

<script>タグの読み込みに失敗したかどうかを確認する方法

<script>タグをページの<head>に動的に追加しており、何らかの方法で読み込みが失敗したかどうか、404、読み込まれたスクリプトのスクリプトエラー、なんでも。

Firefoxでは、これは機能します。

var script_tag = document.createElement('script');
script_tag.setAttribute('type', 'text/javascript');
script_tag.setAttribute('src', 'http://fail.org/nonexistant.js');
script_tag.onerror = function() { alert("Loading failed!"); }
document.getElementsByTagName('head')[0].appendChild(script_tag);

ただし、これはIEまたはSafariでは機能しません。

Firefox以外のブラウザでこれを機能させる方法を知っている人はいますか？

（特別なコードを.jsファイル内に配置する必要がある解決策は良いとは思いません。優雅で柔軟性に欠けます。）

javascriptonerrorscript-tag
103
David

スクリプトタグのエラーイベントはありません。それが成功したときを知ることができ、タイムアウト後にロードされなかったと仮定します：

<script type="text/javascript" onload="loaded=1" src="....js"></script>
31
Diodeus - James MacFarlane

Html5ブラウザーのみに関心がある場合は、エラーイベントを使用できます（これはエラー処理専用であるため、KISS IMHO）の次世代ブラウザーでのみこれをサポートしてもかまいません。

仕様から：

Src属性の値が空の文字列である場合、または解決できなかった場合、ユーザーエージェントはタスクをキューに入れて、errorという名前の単純なイベントを起動する必要があります要素で、これらの手順を中止します。

〜

読み込みの結果、エラー（DNSエラー、HTTP 404エラーなど）が発生した場合、スクリプトブロックの実行は、要素でerrorという名前の単純なイベントを発生させるだけで構成する必要があります。

これは、エラーが発生しやすいポーリングを行う必要がなく、それをasyncおよびdefer属性と組み合わせて、スクリプトがページのレンダリングをブロックしていないことを確認できることを意味します。

Defer属性は、async属性が指定されている場合でも指定できます。これにより、defer（非同期ではなく）のみをサポートするレガシWebブラウザーは、デフォルトの同期ブロック動作ではなく、defer動作にフォールバックします。

http://www.w3.org/TR/html5/scripting-1.html#script の詳細

24
andrerom

Erwinusのスクリプトはうまく機能しますが、あまり明確にコーディングされていません。私はそれをきれいにし、それが何をしていたかを解読するために自由を取りました。これらの変更を行いました。

  • 意味のある変数名
  • prototypeの使用。
  • require()は引数変数を使用します
  • デフォルトではalert()メッセージは返されません
  • いくつかの構文エラーとスコープの問題を修正しました

再びエルウィナスのおかげで、機能自体が注目されています。

function ScriptLoader() {
}

ScriptLoader.prototype = {

    timer: function (times, // number of times to try
                     delay, // delay per try
                     delayMore, // extra delay per try (additional to delay)
                     test, // called each try, timer stops if this returns true
                     failure, // called on failure
                     result // used internally, shouldn't be passed
            ) {
        var me = this;
        if (times == -1 || times > 0) {
            setTimeout(function () {
                result = (test()) ? 1 : 0;
                me.timer((result) ? 0 : (times > 0) ? --times : times, delay + ((delayMore) ? delayMore : 0), delayMore, test, failure, result);
            }, (result || delay < 0) ? 0.1 : delay);
        } else if (typeof failure == 'function') {
            setTimeout(failure, 1);
        }
    },

    addEvent: function (el, eventName, eventFunc) {
        if (typeof el != 'object') {
            return false;
        }

        if (el.addEventListener) {
            el.addEventListener(eventName, eventFunc, false);
            return true;
        }

        if (el.attachEvent) {
            el.attachEvent("on" + eventName, eventFunc);
            return true;
        }

        return false;
    },

    // add script to dom
    require: function (url, args) {
        var me = this;
        args = args || {};

        var scriptTag = document.createElement('script');
        var headTag = document.getElementsByTagName('head')[0];
        if (!headTag) {
            return false;
        }

        setTimeout(function () {
            var f = (typeof args.success == 'function') ? args.success : function () {
            };
            args.failure = (typeof args.failure == 'function') ? args.failure : function () {
            };
            var fail = function () {
                if (!scriptTag.__es) {
                    scriptTag.__es = true;
                    scriptTag.id = 'failed';
                    args.failure(scriptTag);
                }
            };
            scriptTag.onload = function () {
                scriptTag.id = 'loaded';
                f(scriptTag);
            };
            scriptTag.type = 'text/javascript';
            scriptTag.async = (typeof args.async == 'boolean') ? args.async : false;
            scriptTag.charset = 'utf-8';
            me.__es = false;
            me.addEvent(scriptTag, 'error', fail); // when supported
            // when error event is not supported fall back to timer
            me.timer(15, 1000, 0, function () {
                return (scriptTag.id == 'loaded');
            }, function () {
                if (scriptTag.id != 'loaded') {
                    fail();
                }
            });
            scriptTag.src = url;
            setTimeout(function () {
                try {
                    headTag.appendChild(scriptTag);
                } catch (e) {
                    fail();
                }
            }, 1);
        }, (typeof args.delay == 'number') ? args.delay : 1);
        return true;
    }
};

$(document).ready(function () {
    var loader = new ScriptLoader();
    loader.require('resources/templates.js', {
        async: true, success: function () {
            alert('loaded');
        }, failure: function () {
            alert('NOT loaded');
        }
    });
});
20
Aram Kocharyan

私はこれが古いスレッドであることを知っていますが、私はあなたに素敵な解決策を手に入れました（私は思う）。すべてのAJAX stuff。を処理する私のクラスからコピーされます。

スクリプトをロードできない場合、エラーハンドラを設定しますが、エラーハンドラがサポートされていない場合、15秒間エラーをチェックするタイマーにフォールバックします。

function jsLoader()
{
    var o = this;

    // simple unstopable repeat timer, when t=-1 means endless, when function f() returns true it can be stopped
    o.timer = function(t, i, d, f, fend, b)
    {
        if( t == -1 || t > 0 )
        {
            setTimeout(function() {
                b=(f()) ? 1 : 0;
                o.timer((b) ? 0 : (t>0) ? --t : t, i+((d) ? d : 0), d, f, fend,b );
            }, (b || i < 0) ? 0.1 : i);
        }
        else if(typeof fend == 'function')
        {
            setTimeout(fend, 1);
        }
    };

    o.addEvent = function(el, eventName, eventFunc)
    {
        if(typeof el != 'object')
        {
            return false;
        }

        if(el.addEventListener)
        {
            el.addEventListener (eventName, eventFunc, false);
            return true;
        }

        if(el.attachEvent)
        {
            el.attachEvent("on" + eventName, eventFunc);
            return true;
        }

        return false;
    };

    // add script to dom
    o.require = function(s, delay, baSync, fCallback, fErr)
    {
        var oo = document.createElement('script'),
        oHead = document.getElementsByTagName('head')[0];
        if(!oHead)
        {
            return false;
        }

        setTimeout( function() {
            var f = (typeof fCallback == 'function') ? fCallback : function(){};
            fErr = (typeof fErr == 'function') ? fErr : function(){
                alert('require: Cannot load resource -'+s);
            },
            fe = function(){
                if(!oo.__es)
                {
                    oo.__es = true;
                    oo.id = 'failed';
                    fErr(oo);
                }
            };
            oo.onload = function() {
                oo.id = 'loaded';
                f(oo);
            };
            oo.type = 'text/javascript';
            oo.async = (typeof baSync == 'boolean') ? baSync : false;
            oo.charset = 'utf-8';
            o.__es = false;
            o.addEvent( oo, 'error', fe ); // when supported

            // when error event is not supported fall back to timer
            o.timer(15, 1000, 0, function() {
                return (oo.id == 'loaded');
            }, function(){ 
                if(oo.id != 'loaded'){
                    fe();
                }
            });
            oo.src = s;
            setTimeout(function() {
                try{
                    oHead.appendChild(oo);
                }catch(e){
                    fe();
                }
            },1); 
        }, (typeof delay == 'number') ? delay : 1);  
        return true;
    };

}

$(document).ready( function()
{
    var ol = new jsLoader();
    ol.require('myscript.js', 800, true, function(){
        alert('loaded');
    }, function() {
        alert('NOT loaded');
    });
});
16
Codebeat

nonexistant.js内のjavascriptがエラーを返さないかどうかを確認するには、http://fail.org/nonexistant.jsのようなvar isExecuted = true;内に変数を追加し、スクリプトタグのロード時に存在するかどうかを確認する必要があります。

ただし、nonexistant.jsが404なしで返されたこと（存在することを意味する）のみを確認する場合は、isLoaded変数を使用して試すことができます...

var isExecuted = false;
var isLoaded = false;
script_tag.onload = script_tag.onreadystatechange = function() {
    if(!this.readyState ||
        this.readyState == "loaded" || this.readyState == "complete") {
        // script successfully loaded
        isLoaded = true;

        if(isExecuted) // no error
    }
}

これは両方のケースをカバーします。

9
Luca Matteis

私の作業クリーンソリューション（2017）

function loaderScript(scriptUrl){
   return new Promise(function (res, rej) {
    let script = document.createElement('script');
    script.src = scriptUrl;
    script.type = 'text/javascript';
    script.onError = rej;
    script.async = true;
    script.onload = res;
    script.addEventListener('error',rej);
    script.addEventListener('load',res);
    document.head.appendChild(script);
 })

}

マーティンが指摘したように、次のように使用します。

loaderScript("myscript.js")
  .then(() => { console.log("loaded"); })
  .catch(() => { console.log("error"); });
8
pery mimon

特別な状況では問題を解決するための最も信頼性の高い方法であるため、これが投票されないことを願っています。サーバーがCORSを使用してJavascriptリソースを取得できる場合は（ http://en.wikipedia.org/wiki/Cross-Origin_resource_sharing ）、そのための豊富なオプションが用意されています。

XMLHttpRequestを使用してリソースを取得すると、IEを含む最新のすべてのブラウザーで機能します。 Javascriptをロードしようとしているため、そもそもJavascriptを使用できます。 readyStateを使用して進行状況を追跡できます（ http://en.wikipedia.org/wiki/XMLHttpRequest#The_onreadystatechange_event_listener ）。最後に、ファイルのコンテンツを受け取ったら、eval（）で実行できます。はい、セキュリティに関しては通常のスクリプトの読み込みと変わらないため、evalと言いました。実際、John Resigにより、より優れたタグを使用するための同様の手法が提案されています（ http://ejohn.org/blog/degrading-script-tags/ ）。

また、このメソッドを使用すると、evalからロードを分離し、evalの前後に関数を実行できます。並行してスクリプトをロードするが、次々にそれらを評価するときに非常に役立ちます。HTMLにタグを配置すると、ブラウザーで簡単に実行できますが、実行時にJavaScriptを使用してスクリプトを追加することはできません。

CORSは、スクリプトを読み込むためにJSONPよりも望ましいです（ http://en.wikipedia.org/wiki/XMLHttpRequest#Cross-domain_requests ）。ただし、他のサイトに埋め込む独自のサードパーティウィジェットを開発している場合は、実際に独自のiframeで独自のドメインからJavascriptファイルをロードする必要があります（再び、AJAXを使用）

要するに：

  1. AJAX GETを使用してリソースをロードできるかどうかを確認してください。

  2. 正常にロードされた後にevalを使用します

改善するには：

  1. 送信されるcache-controlヘッダーを確認します

  2. そうでない場合は、localStorageにコンテンツをキャッシュする必要があります。

  3. よりクリーンなコードについては、Resigの「degrading javascript」をご覧ください

  4. Require.jsをチェックしてください

6
Gregory Magarshak

このトリックは私にとってはうまくいきましたが、おそらくこれがこの問題を解決する最良の方法ではないことを認めます。これを試す代わりに、javascriptがロードされない理由を確認する必要があります。サーバーなどにスクリプトのローカルコピーを保存するか、スクリプトをダウンロードしようとしているサードパーティベンダーに確認してください。

とにかく、ここに回避策があります：1）変数をfalseに初期化します2）javascriptが読み込まれるときにtrueに設定します（onload属性を使用）3）HTML本体が読み込まれたら変数がtrueまたはfalseかどうかを確認します

<html>
  <head>
    <script>
      var scriptLoaded = false;

      function checkScriptLoaded() {
        if (scriptLoaded) {
          // do something here
        } else {
          // do something else here!
        }
      }
    </script>
    <script src="http://some-external-script.js" onload="scriptLoaded=true;" />
  </head>
  <body onload="checkScriptLoaded()">
    <p>My Test Page!</p>
  </body>
</html>
5
Gautam Tandon

タイマーなしの別のJQueryベースのソリューションを次に示します。

<script type="text/javascript">
function loadScript(url, onsuccess, onerror) {
$.get(url)
    .done(function() {
        // File/url exists
        console.log("JS Loader: file exists, executing $.getScript "+url)
        $.getScript(url, function() {
            if (onsuccess) {
                console.log("JS Loader: Ok, loaded. Calling onsuccess() for " + url);
                onsuccess();
                console.log("JS Loader: done with onsuccess() for " + url);
            } else {
                console.log("JS Loader: Ok, loaded, no onsuccess() callback " + url)
            }
        });
    }).fail(function() {
            // File/url does not exist
            if (onerror) {
                console.error("JS Loader: probably 404 not found. Not calling $.getScript. Calling onerror() for " + url);
                onerror();
                console.error("JS Loader: done with onerror() for " + url);
            } else {
                console.error("JS Loader: probably 404 not found. Not calling $.getScript. No onerror() callback " + url);
            }
    });
}
</script>

おかげで： https://stackoverflow.com/a/14691735/1243926

サンプルの使用法（ JQuery getScript documentation の元のサンプル）：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getScript demo</title>
  <style>
  .block {
     background-color: blue;
     width: 150px;
     height: 70px;
     margin: 10px;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<button id="go">&raquo; Run</button>
<div class="block"></div>

<script>


function loadScript(url, onsuccess, onerror) {
$.get(url)
    .done(function() {
        // File/url exists
        console.log("JS Loader: file exists, executing $.getScript "+url)
        $.getScript(url, function() {
            if (onsuccess) {
                console.log("JS Loader: Ok, loaded. Calling onsuccess() for " + url);
                onsuccess();
                console.log("JS Loader: done with onsuccess() for " + url);
            } else {
                console.log("JS Loader: Ok, loaded, no onsuccess() callback " + url)
            }
        });
    }).fail(function() {
            // File/url does not exist
            if (onerror) {
                console.error("JS Loader: probably 404 not found. Not calling $.getScript. Calling onerror() for " + url);
                onerror();
                console.error("JS Loader: done with onerror() for " + url);
            } else {
                console.error("JS Loader: probably 404 not found. Not calling $.getScript. No onerror() callback " + url);
            }
    });
}


loadScript("https://raw.github.com/jquery/jquery-color/master/jquery.color.js", function() {
  console.log("loaded jquery-color");
  $( "#go" ).click(function() {
    $( ".block" )
      .animate({
        backgroundColor: "rgb(255, 180, 180)"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "olive"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "#00f"
      }, 1000 );
  });
}, function() { console.error("Cannot load jquery-color"); });


</script>
</body>
</html>
4
osa

まあ、私があなたが望むすべてをすることを考えることができる唯一の方法はかなりいです。最初にAJAX呼び出しを実行してJavascriptファイルのコンテンツを取得します。これが完了したら、ステータスコードを確認して、これが成功したかどうかを判断します。次に、xhrオブジェクトからresponseText try/catchで、スクリプトタグを動的に作成し、IEの場合、スクリプトタグのtextプロパティをJSテキストに設定できます。他のすべてのブラウザーでは、スクリプトタグの内容を含むテキストノード：スクリプトタグに実際にファイルのsrcの場所が含まれることを期待するコードがある場合、これは機能しませんが、ほとんどの状況では問題ありません。

1
nickjsify

これはプロミスを使用して安全に行うことができます

function loadScript(src) {
  return new Promise(function(resolve, reject) {
    let script = document.createElement('script');
    script.src = src;

    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error("Script load error: " + src));

    document.head.append(script);
  });
}

そして、このように使用します

let promise = loadScript("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js");

promise.then(
  script => alert(`${script.src} is loaded!`),
  error => alert(`Error: ${error.message}`)
);
1
Nithin Chandran

Safariで機能しないのは、属性構文を使用しているためです。ただし、これは正常に機能します。

script_tag.addEventListener('error', function(){/*...*/}, true);

... IEを除く。

正常に実行されたスクリプトを確認する場合は、そのスクリプトを使用して変数を設定し、外部コードで設定されていることを確認するだけです。

1
user42092

これは、ウィンドウオブジェクトで発生する読み込みエラーを検出するためにプロミスを使用した方法です。

<script type='module'>
window.addEventListener('error', function(error) {
  let url = error.filename
  url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));
  url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));
  url = url.substring(url.lastIndexOf("/") + 1, url.length);
  window.scriptLoadReject && window.scriptLoadReject[url] && window.scriptLoadReject[url](error);
}, true);
window.boot=function boot() {
  const t=document.createElement('script');
  t.id='index.mjs';
  t.type='module';
  new Promise((resolve, reject) => {
    window.scriptLoadReject = window.scriptLoadReject || {};
    window.scriptLoadReject[t.id] = reject;
    t.addEventListener('error', reject);
    t.addEventListener('load', resolve); // Careful load is sometimes called even if errors prevent your script from running! This promise is only meant to catch errors while loading the file.
  }).catch((value) => {
    document.body.innerHTML='Error loading ' + t.id + '! Please reload this webpage.<br/>If this error persists, please try again later.<div><br/>' + t.id + ':' + value.lineno + ':' + value.colno + '<br/>' + (value && value.message);
  });
  t.src='./index.mjs'+'?'+new Date().getTime();
  document.head.appendChild(t);
};
</script>
<script nomodule>document.body.innerHTML='This website needs ES6 Modules!<br/>Please enable ES6 Modules and then reload this webpage.';</script>
</head>

<body onload="boot()" style="margin: 0;border: 0;padding: 0;text-align: center;">
  <noscript>This website needs JavaScript!<br/>Please enable JavaScript and then reload this webpage.</noscript>
0
Mi G

check（）{var report; report = True}のように、可能であれば関数をJavaスクリプトファイルに含めることができます。関数が実行されないか、おそらくスクリプトが応答しない場合、この関数を実行しますロードされていない場合、スクリプトを使用する準備ができていないと思いますonload属性も便利です。

0
Abhishek Mathur

タイムアウトを設定し、タイムアウト後にロード障害を想定することが提案されました。

setTimeout(fireCustomOnerror, 4000);

そのアプローチの問題は、仮定が偶然に基づいていることです。タイムアウトの期限が切れても、リクエストはまだ保留中です。プログラマがロードが発生しないと想定した後でも、保留中のスクリプトのリクエストがロードされる場合があります。

要求をキャンセルできる場合、プログラムは一定期間待機してから要求をキャンセルできます。

0
Garrett

onerrorイベント

* 2017年8月更新：onerrorはChrome、Firefoxで発生します。onloadはInternet Explorerで発生します。Edgeはonerrorとonloadのいずれも発生しません。この方法は使用しませんが、場合によっては動作します。また

<link> onerrorはIEでは機能しません

*

定義と使用法外部ファイル（ドキュメントや画像など）の読み込み中にエラーが発生すると、onerrorイベントがトリガーされます。

ヒント：オーディオ/ビデオメディアで使用する場合、メディアのロードプロセスに何らかの障害があるときに発生する関連イベントは次のとおりです。

  • オナボート
  • 空いている
  • 取り付けられた
  • オンサスペンド

HTMLの場合：

要素onerror = "myScript">

JavaScriptで、addEventListener（）メソッドを使用：

object.addEventListener（ "error"、myScript）;

注：addEventListener（）メソッドは、Internet Explorer 8以前のバージョンではサポートされていません。

例画像のロード中にエラーが発生した場合、JavaScriptを実行します。

img src = "image.gif" onerror = "myFunction（）">

0
William Monahan