1

Google CDN から jQuery を使用したいのですが、Google から jQuery を読み込めなかった場合に備えて、フォールバック戦略も実装したいと考えています。もちろん、私は常に私のために機能し、今でも機能する良い解決策を知っています:

<html>

<head>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js" type="text/javascript"></script>

  <!-- fallback: load local jq -->
  <script type="text/javascript">
    if (typeof jQuery == 'undefined'){
      document.write(unescape("%3Cscript src='/js/jquery/jquery-1.7.2.js' type='text/javascript'%3E%3C/script%3E"));
    }
  </script>

  <script type="text/javascript">
    alert(jQuery); // something != undefined => works as expected
  </script>

</head>

<body></body>

</html>

ここで、なぜこれが機能しないのか疑問に思っています。

<html>

<head>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js" type="text/javascript"></script>

  <!-- fallback: load local jq -->
  <script type="text/javascript">

    if (typeof jQuery == 'undefined'){ 

      var script  = document.createElement('script');
      script.type = 'text/javascript';
      script.src  = '/js/jquery/jquery-1.7.2.js';        

      //this seems not to work :-(
      document.getElementsByTagName('head')[0].appendChild(script);
    }
  </script>

  <script type="text/javascript">
    alert(jQuery); // undefined => but why????????
  </script>

</head>

<body></body>

</html>

問題は、 document.createElement('script') を使用し、作成したばかりのスクリプト要素を DOM 操作を介して ( document.write() なしで) 追加すると、新しい要素が実際に DOM に追加されることです。しかし、現時点ではロードも実行もされていません。代わりに、後で実行されます。しかし、head 内のすべてのスクリプト タグが同期的に読み込まれ、実行されることを期待していました。上記の場合は当てはまらないようです。

しかし、反対側では、最初の例は問題なく動作します-つまり、document.write() は私が期待したとおりに動作するようです-しかし、なぜですか?

4

0 に答える 0