DOM操作技术-动态脚本

195 阅读2分钟

 使用

这个

显然,这里的DOM代码如实反映了相应的HTML代码。不过,在执行最后一行代码把

然后,就可以通过调用这个函数来加载外部的JavaScript文件了:
loadScript("client.js");

加载完成后,就可以在页面中的其他地方使用这个脚本了。问题只有一个:怎么知道脚本加载完成呢?遗憾的是,并没有什么标准方式来探知这一点。不过,与此相关的一些事件倒是可以派上用场,但要取决于所用的浏览器,详细讨论请见第13章。
另一种指定JavaScript代码的方式是行内方式,如下面的例子所示:

从逻辑上讲,下面的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将

DynamicScriptExample01.htm
经过这样修改之后的代码可以在IE、Firefox、Opera和Safari 3及之后版本中运行。Safari 3.0之前的版本虽然不能正确地支持text属性,但却允许使用文本节点技术来指定代码。如果需要兼容早期版本的Safari,可以使用下列代码:
var script = document.createElement("script");
script.type = "text/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');}");

DynamicScriptExample02.htm
以这种方式加载的代码会在全局作用域中执行,而且当脚本执行后将立即可用。实际上,这样执行代码与在全局作用域中把相同的字符串传递给eval()是一样的。

想要了解更多Java基础知识,可以点击评论区链接和小编一起学习java吧,此视频教程为初学者而著,零基础入门篇!给同学们带来全新的Java300集课程啦!java零基础小白自学Java必备优质教程_手把手图解学习Java,让学习成为一种享受_哔哩哔哩_bilibili