0

私は簡単なページを持っています:

<!DOCTYPE html>
<html>
<head>
  <script>
    func = function(message) {
       alert(message);
    }
  </script>
</head>
<body>
  <h1> Visible content </h1>
</body>
</html>

別のファイルにあるスクリプト-たとえば-- test.js:

func("It should block the page.");

次のように入力して、このスクリプトを頭に追加するだけです。

<script src="test.js"></script>

コンテンツが表示される前にアラートが表示されますが、これは問題ありません。
ただし、スクリプトを動的に追加すると:

<script>
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', 'test.js');
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

コンテンツの後にアラートが表示されます。

なぜそれが起こるのですか？ブラウザは、スクリプトが完了するまで待つべきではありませんか (新しいスクリプトの追加と読み込みを含む)。動的に追加されたスクリプトで本文コンテンツをブロックすることは可能ですか?

4

2 に答える 2

1

非同期ロードが原因で発生します。記事をご覧ください: http://css-tricks.com/thinking-async/

ブロックすることの意味によって異なります。コンテンツ ブロックを非表示<div style="display:none;"></div>にしてページをロードし、ページのロード後に表示することができます。

jQueryの方法は次のとおりです。

$(function () {
    // do stuff after DOM has loaded
});

詳細については、この回答をご覧ください: javascript domready?

于 2013-10-14T22:17:58.040 に答える
-1

document.ready でラップします。

$(document).ready(function () {
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', 'test.js');
  document.getElementsByTagName('head')[0].appendChild(script);
});
于 2013-10-14T22:09:54.943 に答える