动态脚本

前面的话

  动态脚本是指在页面加载时不存在,但将来的某一时刻通过修改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>

内部脚本

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

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

时间: 2024-10-12 21:32:23

动态脚本的相关文章

DOM操作技术----动态脚本

创建动态脚本有两种方式:插入外部文件和直接插入JavaScript代码 方式一:插入外部文件 <script type="text/javascript" src="client.js" ></script> 创建此节点的DOM代码等同于: var script = documen.createElement("script"); script.type="text/javascript"; scrip

JavaScript 动态脚本

动态脚本,指的是在页面加载时不存在,但将来的某一个时刻通过修改DOM动态添加的脚本. <script type="text/javascript"> function loadScriptString(code){ var script = document.creatElement("script"); script.type("text/javascript"); document.body.appendChild(script)

【前端基础】动态脚本与JSONP

博主入职两个月了,越来越感受到打好基础对于前端工程师的重要性,在向着狂拽酷炫的框架&构建工具狂飚之前,必须有一个坚实的基础打底,才不至于轻易翻车.所以博主最近一直在恶补<JS高级程序设计>,发现了很多第一次读时忽略的.有趣的地方.不愧是经典,常读常新呀! PART 1  最熟悉的陌生人--动态脚本 对于一些刚接触前端不久的同学来说,"动态脚本"可能是一个有些陌生的字眼,我也是偶然看高程,才想起同桌的你--不,才注意到这个技术.但事实上,这是每个前端每天都会用到的技术

atitit.bsh&#160;BeanShell&#160;的动态脚本使用java

atitit.bsh BeanShell 的动态脚本使用java 1.1. BeanShell是一个小巧免费的JAVA源码解释器 ,支持对象式的脚本语言特性,亦可嵌入到JAVA源代码中. 亦可嵌入到JAVA源代码中,能动态执行JAVA源代码并为其扩展了脚本语言的一些特性,像JavaScript和perl那样的弱类型.命令式.闭包函数等等特性都不在话下 BeanShell能理解标准的JAVA语句,表达式,和方法宣告.语句和表达式的内容可以是:变量,宣告,赋值,方法调用,循环,条件等.在 Java程

JavaScript高级程序设计之动态脚本及动态样式

1.动态加载脚本(src 原理,异步,支持跨域) var loadScript = function (url, callback) { var script = document.createElement("script"); script.src = url; document.getElementsByTagName("head")[0].appendChild(script); if (script.addEventListener) { // for w

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及其他的细节问题.而除了defer和async特性,动态脚本和Ajax脚本注入也是两种常用的创建无阻塞脚本的方法.总的来看,这两种方法都能达到脚本加载不影响页面解析和渲染的作用,但是在不同的浏览器中,这两种技术所创建的脚本的执行时机还是有一定差异,今天我们再来探讨一下通过动态脚本技术和Ajax注入的脚本在这些方

【开源】.Net 动态脚本引擎NScript

开源地址: https://git.oschina.net/chejiangyi/NScript 开源QQ群: .net 开源基础服务  238543768 .Net 动态脚本引擎 NScript   用于解决.net环境windows系统下类似java中Grovvy的功能和方向.在互联网项目可以用来做一些功能,如动态营销活动(营销业务解耦和剥离),规则引擎,流程引擎,windows运维脚本,源码式插件开发等. 使用方式 包括exe Main方式,程序集方式,应用程序域三种方式. 最终编译文件

动态脚本元素

动态脚本元素即在js中去创建<script>标签加载外部js并执行,这样加载的好处是文件的下载和执行过程不会阻塞页面的其他进程.通过下面两个例子对比出效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht

Fortify漏洞之Dynamic Code Evaluation: Code Injection(动态脚本注入)和 Password Management: Hardcoded Password(密码硬编码)

继续对Fortify的漏洞进行总结,本篇主要针对  Dynamic Code Evaluation: Code Injection(动态脚本注入) 和 Password Management: Hardcoded Password(密码硬编码)  的漏洞进行总结,如下: 1.1.产生原因: 许多现代编程语言都允许动态解析源代码指令.这使得程序员可以执行基于用户输入的动态指令.当程序员错误地认为由用户直接提供的指令仅会执行一些无害的操作时(如对当前的用户对象进行简单的计算或修改用户的状态),就会出