11

スクリプトが完全にロードされた後に何かをしようとしています。(IE8)

テストに使用するスクリプト: http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
および無効なもの: http://ajax.googleapis.com/ajax/libs/ jquery/1.5.1/jquery.minaaaaaaa.js

コード... 

var script = create the element and append to head...

// this works fine with FF/Chrome/...
script.onload = function() {alert('script loading complete');}
script.onerror = function() {alert('error loading script');}

// and for IE
script.onreadystatechange = function() {
    // this will alert 1.loading 2.loaded
    alert(this.readyState);

    // this never works
    if(this.readyState == 'complete') {alert('script loading complete');}

    // this works with either a valid or INVALID url
    else if(this.readyState == 'loaded') {alert('script loaded');}
};

私の場合、「完了」は表示されず、URLが無効であっても「ロード済み」が表示されます。したがって、スクリプトが IE に正しくロードされているかどうかを判断する方法はありません。

私は何か間違ったことをしていますか？完全な状態を取得できないのはなぜですか?

アップデート

OK、いくつかの記事を読みましたが、readystate はスクリプトの読み込みを検出する信頼できる方法ではないようです。

そうする別の方法はありますか？jQuery を使用せず、純粋な Javascript を使用します。

4

3 に答える 3

5

あなたのコメントによると、XHR ( XMLHttpRequest) を使用してスクリプトタグを動的に追加する方法の概略図を次に示します。

var handleRequest = function( ) { //!! set up the handleRequest callback

     if(this.status != undefined) {

         /* do something with the status code here */

     }

     if(this.readyState == 4) {

          var script = document.createElement("script") ;
              script.setAttribute("type","text/javascript") ;
          var text = document.createTextNode(this.responseText) ;
              script.appendChild(text) ;

          var head = document.getElementsByTagName("head")[0] ;
              head.insertBefore(script,head.firstChild) ;

     }

} ;

var request ; //!! supposing you have a way to get a working XHR Object

//.. set the XHR Object

request.open("GET",url,true) ;
request.overrideMimeType("text/javascript") ;
request.onreadystatechange = handleRequest ;
request.send(null) ;

これは、私の言いたいことを理解してもらうためだけのものであることを覚えておいてください。jQuery のソース コードから判断すると、実用的な例はもっと精巧なものでなければなりません。

リンク:

于 2011-08-05T08:27:10.540 に答える
-1

ロード完了の検出

[..] ある Web ページでは、ロードの完了時に呼び出されるいくつかのイベント ハンドラーを設定することを提案しました。これを行うには、前のコードに次の行を追加します。

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.onreadystatechange= function () {
  if (this.readyState == 'complete') helper();
}
script.onload= helper;
script.src= 'helper.js';
head.appendChild(script);

ここでは、新しく作成したスクリプト タグに 2 つの異なるイベント ハンドラーを設定します。ブラウザーによっては、スクリプトの読み込みが完了したときに、これら 2 つのハンドラーのいずれかが呼び出されることになっています。onreadystatechange ハンドラーは IE でのみ機能します。onload ハンドラーは、Gecko ブラウザーと Opera で動作します。

「this.readyState == 'complete'」テストは、実際には完全には機能しません。readyState は、理論的には一連の状態を通過します。

  • 0 未初期化
  • 1回の読み込み
  • 2つ搭載
  • 3 インタラクティブ
  • 4 完了

しかし実際には、状態がスキップされる場合があります。IE 7 での私の経験では、ロードされたイベントまたは完了したイベントのいずれかを取得しますが、両方を取得することはできません。

キャッシュからロードしているかどうかに関係している可能性がありますが、取得するイベントに影響を与える他の要因があるようです。ローディングやインタラクティブなイベントが発生することもあれば、そうでないこともあります。テストが「this.readyState == 'loaded' || this.readyState == 'complete'」になる可能性がありますが、2 回トリガーされるリスクがあります。

http://unixpapa.com/js/dyna.html

アップデート

お願いしscript.onreadystatechangeます、これであなたのコールバックを解決できますか:

newjs.onreadystatechange = function () {
   if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
      newjs.onreadystatechange = null;
      alert('script is complete or loaded.");
   }

};

私が気付いたもう1つのことは、==演算子との文字列比較を行っていることです。これは誤解を招く可能性があります。===代わりに使用してください。

于 2011-08-04T18:33:15.927 に答える