0

私のソースコード:

<!doctype html>
<html>
<head>
    <title>onload test</title>
    <link type="text/css" rel="stylesheet" href="spot.css" media="screen" />

</head>
<body>
  <h1>Welcome Page</h1>

  <script>

      debugger;
      function constructScripts(url, callBack) {
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.src = url;
          document.getElementsByTagName("head")[0].appendChild(script);
          if (script.readyState) {
              script.onreadystatechange = function () {
                  if (script.readyState == "loaded" || script.readyState == "complete") {
                      script.onreadystatechange = null; callBack();
                  }
              };
          }
          else {
              script.onload = callBack;
          }
      }


  </script>
  <script>
      debugger;
      myCallBack = function () {
          alert(this.src + "loaded");
      }

      constructScripts("files1", myCallBack);
      constructScripts("files2", myCallBack);
      constructScripts("files3", myCallBack);

  </script>

</body>
</html>

this.src はここでは定義されていません。これは、ファイル名を読み取ることができるように src プロパティを持つはずの「スクリプト」オブジェクトである必要があると思います。ここにいる「これ」は誰ですか？また、ページのソースを表示すると、これらのスクリプトは header() セクションに含まれていませんでした。なぜそうなのですか？ありがとう。

4

3 に答える 3

1

this.src はここでは定義されていません。

すべきではありません… 以前に定義されています:script.src = url

これは、ファイル名を読み取ることができるように src プロパティを持つはずの「スクリプト」オブジェクトである必要があると思います。ここにいる「これ」は誰ですか？

onloadまたはreadystatechangeイベントが発生するスクリプト要素

また、ページのソースを表示すると、これらのスクリプトは header() セクションに含まれていませんでした。なぜそうなのですか？

JavaScript によって操作された後のライブ DOM のシリアル化ではなく、ページ ソースを見ているためです。

于 2012-05-04T09:31:06.280 に答える
1

関数を呼び出すときはcallBack、 のようなスクリプト オブジェクトを渡しますcallBack(script)。callBack次のように関数を変更します

myCallBack = function (script) {
      alert(script.src + "loaded");
  }

ソースを表示しても、動的に読み込まれた要素は表示されません。

于 2012-05-04T09:32:18.683 に答える
0

プロトタイプを使用して関数を拡張する必要があります。

Element.prototype.MyMethod = function(){}

編集したコードを見てください

<!doctype html>
<html>
<head>
    <title>onload test</title>
    <link type="text/css" rel="stylesheet" href="spot.css" media="screen" />

</head>
<body>
  <h1>Welcome Page</h1>

  <script>
        Element.prototype.MyMethod = function(){}
      function constructScripts(url, callBack) {
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.src = url;
          script.MyMethod = callBack;
          document.getElementsByTagName("head")[0].appendChild(script);
          if (script.readyState) {
              script.onreadystatechange = function () {
                  if (script.readyState == "loaded" || script.readyState == "complete") {
                      script.onreadystatechange = null; 
              script.MyMethod();
                  }
              };
          }
          else {
              script.onload = callBack;
          }
      }


  </script>
  <script>
      myCallBack = function () {
          alert(this.src + "loaded");
      }

      constructScripts("files1", myCallBack);
      constructScripts("files2", myCallBack);
      constructScripts("files3", myCallBack);
  </script>

</body>
</html>
于 2012-05-04T10:07:29.337 に答える