JavaScript插入动态脚本

sailinglee

浏览: 304093 次
性别:
来自: 上海

最近访客更多访客>>

zq_0752

1040087877

HUAGE1969

leimingchao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML & JS & DOM & CSS

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

转自：http://www.w3cmm.com/dom/insert-javascript.html

分享到：

Text 类型 | innerHTML插入<style>元素

2014-09-05 18:47
浏览 601
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论