首页 > 代码库 > 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操作技术----动态脚本