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

创建动态脚本有两种方式:插入外部文件和直接插入JavaScript代码

方式一:插入外部文件

<script type="text/javascript" src="client.js" ></script>

创建此节点的DOM代码等同于:

var script = documen.createElement("script");

script.type="text/javascript";

script.src="clent.js";

document.body.appendChild(script);

在执行最后一行代码把<script>元素添加到页面之前,是不会加载外部文件的。

整个过程可以用以下函数封装:

function loadScript(url){

var script = documen.createElement("script");

script.type = "text/javascript";

script.src=url;

document.body.appendChild(script);

}

可惜有个问题:没有标准方式探知脚本是否加载完成。

方式二:指定JavaScript代码的方式为行内式;

<script type="text/javascript">

function sayHi(){

alert("hi");

}

</script>

逻辑上讲,下面的DOM代码是有效的:

var script = documen.createElement("script");

script.type="text/javascript";

script.appendChild(document.createTextNode(“function sayHi(){alert(“hi”);}”));

document.body.appendChild(script);

但是在IE中会导致错误,IE会将<script>视为一个特殊的元素,不允许DOM访问其子节点;但是,可以用<script>元素的text属性来指定JavaScript代码。

var script = documen.createElement("script");

script.type="text/javascript";

script.text=“function sayHi(){alert(“hi”);}”;

document.body.appendChild(script);

但是以上代码在Safari3.0之前的版本不能支持text属性,但是可以用文本节点技术指定代码。

var script = documen.createElement("script");

script.type="text/javascript";

script.code=“function sayHi(){alert(“hi”);}”;

try{

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

}catch(ex){

   script.text = "code";

}

document.body.appendChild(script);

总之,首先尝试标准的DOM文本节点方法,因为除IE会抛出错误,所有的浏览器都支持这种方式。如果这行代码抛出了错误,南无说明是IE,于是就必须使用text属性了。整个过程可以封装一个函数如下:

function loadScriptString(code){

var script = documen.createElement("script");

script.type="text/javascript";

  try{

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

}catch(ex){

script.text = "code";

}

document.body.appendChild(script);

}

时间: 2024-08-04 13:34:22

DOM操作技术----动态脚本的相关文章

《JAVASCRIPT高级程序设计》节点层次和DOM操作技术

DOM可以将任何HTML和XML文档描绘成一个由多层次节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息,每种类型都继承与Node接口,因此都共同享有一些属性和方法,同时,也拥有各自的特点.数据和方法.另外,每个节点都与其余节点存在一些关系. 一.节点树 以下面代码为例,先简单介绍一下: <html> <head> <title>Sample Page</title> </head> <body> <p&g

第10章 DOM (2 DOM操作技术)

10.2 DOM操作技术 10.2.1 动态脚本 使用<script>元素可以向页面中插入JavaScript 代码,一种方式是通过其src 特性包含外部文件,另一种方式就是用这个元素本身来包含代码.而这一节要讨论的动态脚本,指的是在页面加载时不存在,但将来的某一时刻通过修改DOM 动态添加的脚本.跟操作HTML 元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入JavaScript 代码. 动态加载的外部JavaScript 文件能够立即运行,比如下面的<script>元

动态脚本

前面的话 动态脚本是指在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本.和操作HTML元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入内部javascript代码.下面将详细介绍这两种情况 外部脚本 //script.js里面的内容 box.style.color = "red"; var script = document.createElement("script"); script.type = "text/javascri

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  最熟悉的陌生人--动态脚本 对于一些刚接触前端不久的同学来说,"动态脚本"可能是一个有些陌生的字眼,我也是偶然看高程,才想起同桌的你--不,才注意到这个技术.但事实上,这是每个前端每天都会用到的技术

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

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

javaScript DOM操作技术

在一般情况下我们操作DOM都比较简单明了,尤其是jquery出来之后,我们会发现操作DOM变得如此简单,但是也会有许多隐藏的坑,所以有时候操作DOM也并非想象中那么简单: 简单而常用的操作: 访问节点 document.getElementById()    根据Id获取元素节点 document.getElementsByName()    根据name获取元素节点 document.getElementsByClassName()    根据class获取元素节点 <html> <h

DOM操作技术

目录 动态脚本 动态样式 操作表格 使用NodeList 动态脚本 使用<script>元素可以向页面中插入JavaScript代码的两种方式:通过src特性包含外部文件:使用这个元素本身来包含代码动态脚本指的是页面加载时不存在,在将来某一刻需要通过修改DOM动态添加脚本.跟操作HTML元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入JS代码.(1)插入外部文件 //动态创建<script type="text/javascript" src="t

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

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