DOM操作技术----动态脚本

Posted 2020-09-21

创建动态脚本有两种方式：插入外部文件和直接插入javascript代码

方式一：插入外部文件

<script type="text/javascript" src="client.js" ></script>

创建此节点的DOM代码等同于：

var script = documen.createElement("script");

script.type="text/javascript";

script.src="clent.js";

document.body.appendChild(script);

在执行最后一行代码把<script>元素添加到页面之前，是不会加载外部文件的。

整个过程可以用以下函数封装：

function loadScript(url){

   var script = documen.createElement("script");

   script.type = "text/javascript";

   script.src=url;

  document.body.appendChild(script);

}

可惜有个问题：没有标准方式探知脚本是否加载完成。

方式二：指定JavaScript代码的方式为行内式；

<script type="text/javascript">

   function sayHi(){

      alert("hi");

  }

</script>

逻辑上讲，下面的DOM代码是有效的：

var script = documen.createElement("script");

script.type="text/javascript";

script.appendChild（document.createTextNode（“function sayHi（）{alert（“hi”）；}”））;

document.body.appendChild(script);

但是在IE中会导致错误，IE会将<script>视为一个特殊的元素，不允许DOM访问其子节点；但是，可以用<script>元素的text属性来指定JavaScript代码。

var script = documen.createElement("script");

script.type="text/javascript";

script.text=“function sayHi（）{alert（“hi”）；}”;

document.body.appendChild(script);

但是以上代码在Safari3.0之前的版本不能支持text属性，但是可以用文本节点技术指定代码。

var script = documen.createElement("script");

script.type="text/javascript";

script.code=“function sayHi（）{alert（“hi”）；}”;

try{

    script.appendChild（document.createTextNode（“code”））；

}catch（ex）{

   script.text = "code";

}

document.body.appendChild(script);

总之，首先尝试标准的DOM文本节点方法，因为除IE会抛出错误，所有的浏览器都支持这种方式。如果这行代码抛出了错误，南无说明是IE，于是就必须使用text属性了。整个过程可以封装一个函数如下：

function loadScriptString（code）{

    var script = documen.createElement("script");

    script.type="text/javascript";

  try{

    script.appendChild（document.createTextNode（“code”））；

   }catch（ex）{

   script.text = "code";

   }

   document.body.appendChild(script);

}