首页 > 代码库 > DOM操作技术----动态脚本

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

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

方式一:插入外部文件

<script type="text/javascript" src="http://www.mamicode.com/client.js" ></script>

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

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

script.type="text/javascript";

script.src="http://www.mamicode.com/clent.js";

document.body.appendChild(script);

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

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

function loadScript(url){

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

   script.type = "text/javascript";

   script.src=http://www.mamicode.com/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);

}

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