首页 > 代码库 > 动态脚本
动态脚本
前面的话
动态脚本是指在页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本。和操作HTML元素一样，创建动态脚本也有两种方式：插入外部文件和直接插入内部javascript代码。下面将详细介绍这两种情况
外部脚本
//script.js里面的内容 box.style.color = "red";
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.mamicode.com/script.js";
document.body.appendChild(script);
使用函数封装如下：
<div id="box">测试文字</div>
<button id="btn">动态添加脚本</button>
<script>
function loadScript(url){
loadScript.mark = ‘load‘;
var script = document.createElement("script");
script.type = "text/javascript";
script.src = http://www.mamicode.com/url;"js/script.js");
}
}
</script>
内部脚本
另一种插入动态脚本的方式是插入内部脚本，如下所示
<script>
box.style.color = "red";
</script>
var script = document.createElement("script");
script.innerHTML = ‘box.style.color = "red"‘;
document.body.appendChild(script);
使用函数封装如下：
<div id="box">测试文字</div>
<button id="btn">动态添加样式</button>
<script>
function loadScript(str){
loadScript.mark = ‘load‘;
var script = document.createElement("script");
script.type = "text/javascript";
script.innerHTML = str;
document.body.appendChild(script);
}
btn.onclick = function(){
if(loadScript.mark != ‘load‘){
loadScript("box.style.color = ‘red‘");
}
}
</script>
在标准浏览器下，上面代码可以正常运行。但是，在IE8-浏览器下却报错。这是因为IE8-浏览器将<script>元素视为一个特殊的元素，不允许DOM访问其子节点，使用appendChild()方法或innerHTML属性都会报错
兼容写法
动态插入内部脚本存在兼容问题，可使用<script>元素的text属性替代innerHTML属性来指定javascript代码
<div id="box">测试文字</div>
<button id="btn">动态添加样式</button>
<script>
function loadScript(str){
loadScript.mark = ‘load‘;
var script = document.createElement("script");
script.type = "text/javascript";
script.text = str;
document.body.appendChild(script);
}
btn.onclick = function(){
if(loadScript.mark != ‘load‘){
loadScript("box.style.color = ‘red‘");
}
}
</script>
动态脚本
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。