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');}");

猜你喜欢

转载自www.cnblogs.com/itsmart/p/12590132.html