JS动态添加JavaScript语句

原文章:http://www.cnblogs.com/suntrain/p/5663794.html

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

动态加载外的外部JavaScript文件能够立即运行,比如下面的<script>元素。

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

而创建这个节点的DOM代码如下所示:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";
document.body.appendChild(script);

显然这里的DOM如实的反映了相应的HTML代码。不过执行最后一行代码把<script>元素添加到页面之前,是不会下载外部文件的。也可以把这个元素添加到<head>元素中效果相同。整个过程可以使用下面的函数来封装:

function loadscript(url) {
    var script = document.createElement("script");
    var script.type = "text/javacript";
    script.src = url;
    document.body.appendChild(script);
}

然后,就可以通过调用这个函数来加载外部的JavaScript文件了:

loadScript("client.js");

加载完成后,就可以在页面中的其它地方使用这个脚本了。

另一种指定JavaScript代码的方式是行内方式,如下面的例子所示:

<script type="text/javascript">
function sayHi() {
    alert("hi");
}
</script>

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

var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function sayHi() {alert(‘hi‘);}"));
document.body.appendChild(script);

在Firefox、Safari、Chrome和Opera中,这些DOM代码可以正常运行。但在IE中,则会导致错误。IE将<script>视为一个特殊的元素,不允许DOM访问其子节点。不过,可以使用

<script>元素的text属性来指定JavaScript代码,想下面的例子这样:

var script = document.creatElement("script");
script.type = "text/javascript";
script.text = "function sayHi() {alert(‘hi‘);}";
document.body.appendChild(script);

经过修改之后的代码可以在IE、Firefox、Opera和Safari3.0中运行。Safari3.0之前的版本虽然不能正确的支持text属性,但却允许使用文本节点技术来指定代码。如果需要兼容早期版本的Safari,可以使用下列代码:

var script = document.createElement("script");
script.type = "type/javascript";
var code = "function sayHi() {alert(‘hi‘);}";
try {
    script.appendChild(document.createTextNode(code));
} catch (ex) {
    script.text = code;
}
document.body.appendChild(script)

这里首先尝试标准的DOM文本节点方法,因为除了IE(在IE中会导致抛出错误),所有的浏览器都支持之中方式。如果这行代码抛出了错误,那么说明是IE,于是就必须使用text属性了,整个过程可以用以下函数来表示:

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 sayHi() {alert(‘hi‘);}");;
时间: 2024-11-02 14:51:09

JS动态添加JavaScript语句的相关文章

js动态添加file控件

<html></head><script language="javascript" type="text/ecmascript">//======================//功能:在表单中input file控件//参数:parentID---要插入input file控件的父元素ID// inputID----input file控件的ID//======================function createI

JS动态添加到下拉列表数据

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS动态添加删除表格数据</title></head><body><script type="text/javascript"> function f() { var provinceName=docume

【原生js】js动态添加dom,如何绑定事件

首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完dom以后立即执行一次函数A即可. 需要注意的是,在你可能同事需要添加许多的dom,不要添加一个就执行一次函数A,这样会增加浏览器的负载,你需要在所有dom添加完以后在执行函数A,例如你用一个for循环遍历dom组合并拼接成一个字符串,然后添加到某个父级dom里面,这个时候你需要在循环外添加一次就可以

每天都有新发现——如何优雅的用js动态添加html代码

body { font-family: 微软雅黑,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5; } html, body { } h1 { font-size:1.5em; font-weight:bold; } h2 { font-size:1.4em; font-weight:bold; } h3 { fon

form表单 无法提交js动态添加的表单元素问题。。

第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url  "> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </form> &l

MUI 里js动态添加数字输入框后,增加、减少按钮无效

numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输入框,需要 mui('#abc').numbox() 初始化一下. 为什么 test() 放在 mui.plusReady 外边可以,而放在里边就不可以?这是因为 numbox 的自动初化是在 mui.ready 时完成的,直接在外部的 test() 执行发生在 mui.ready 之前,而写在 m

Js动态添加复选框Checkbox的实例方法!!!

首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement("input"); checkBox.setAttribute("type","checkbox"); checkBox.setAttribute("id",'123456'); 但是,这样产生的checkbox是不带尾后的文字的,如果需要添加,那么需要使用 document.createTe

js动态添加事件-事件委托

作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 其所谓的动态添加事件实质就是指js中的事件委托. 我们知道在js中,事件处理只能绑定在当前被选中的元素上,换句话也就是说,事件处理只能绑定在当前文档已经存在的元素上!但是,往往小伙伴们都会遇到一个问题就是,我的元素是后来动态添加到页面的,而我又想给该元素绑定

js动态添加对象

js的数组,字符串,对象操作是实现一些功能不可缺少的部分. 一般情况下js的数组和字符串动态加起来比较方便,都有自己提供的方法,数组的push(),字符串直接用加号等.但是js对象动态添加就需要一点工作了 下面我写了两种动态添加对象的方法 第一种 function toObj1(key,val){ var data = {}; data[key] = val; return data; } var obj1 = toObj1('name','nurdun'); console.log(obj1)