Question

我的源代码：

<!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（）部分中。为什么会这样？感谢。

Answer 1

this.src在这里未定义。

它不应该......它在前面定义：script.src = url

我想这应该是一个'脚本'对象，它应该具有src属性，以便我可以读取文件名。谁在这里'这个'？

onload或readystatechange事件触发的脚本元素

此外，当我查看页面源时，这些脚本未包含在header（）部分中。为什么会这样？

因为您正在查看页面源代码，而不是在JavaScript操作后实时DOM的序列化。

Answer 2

当您呼叫callBack函数时，将其传递给callBack(script)这样的脚本对象。修改callBack函数，如

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

查看源代码不显示以dinamically方式加载的元素。

Answer 3

您需要使用原型来扩展您的功能。

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>

在javascript中获取事件处理对象的状态

3 个答案: