DOM操作技术之动态脚本

使用<script>元素可以向页面中插入javascript代码：

一种方式是通过其src特性包含外部文件

第二种方式是就是用这个元素本身来包含代码

首先可以使用下面函数来封装

function localScript(url){

var script = document.createElement('script');

script.type = 'text/script';

script.src = url;

document.body.appendChild(script);

}

console.log(localScript('client.js'));

另一种指定javascript代码的方式是行内方式如下列例子所示

<script type="text/javascript">

function sayHi(){

alert('hi');

}

</script>

从逻辑上讲，下面的DOM是有效地：

var script = document.createElement('script');

script.type='text/javascript';

script.append(document.createTextNode("function sayHi (){alert('hi');}"))

document.body.appendChild(script);

在Firefox,Safari,chrome,opera中，这些DOM代码可以正常运行，但在IE中，则会导致错误，IE将<script>视为一个特殊的元素，不允许DOM访问其子节点。

不过可以使用<script>元素的text属性来指定javascript代码，整个过程可以用以下函数来表示

function loadScriptString(code){

var script = document.createElement('script');

script.type = 'text/javascript';

try{

script.appendChild(document.createTextNode(code));

}catch(ex){

script.text = code;

}

document.body.appendChild(script);

}

// 下面是调用这个函数的示例：

loadScriptString("function(){clert('hi');}");