动态脚本

前面的话

  动态脚本是指在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本。和操作HTML元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入内部javascript代码。下面将详细介绍这两种情况

 

外部脚本

//script.js里面的内容
box.style.color = "red";
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "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 = url;
    document.body.appendChild(script);
}
btn.onclick = function(){
    if(loadScript.mark != 'load'){
        loadScript("js/script.js");        
    }
}
</script>

style="width: 100%; height: 60px;" src="https://demo.xiaohuochai.site/js/active/a1.html" frameborder="0" width="320" height="240">

 

内部脚本

  另一种插入动态脚本的方式是插入内部脚本,如下所示

<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>

style="width: 100%; height: 60px;" src="https://demo.xiaohuochai.site/js/active/a2.html" frameborder="0" width="320" height="240">

  在标准浏览器下,上面代码可以正常运行。但是,在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>

style="width: 100%; height: 60px;" src="https://demo.xiaohuochai.site/js/active/a3.html" frameborder="0" width="320" height="240">


更多专业前端知识,请上 【猿2048】www.mk2048.com
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值