js插入动态脚本
原文章:https://www.w3cmm.com/dom/insert-javascript.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');}");;
js插入动态脚本的更多相关文章
- 【前端基础】动态脚本与JSONP
博主入职两个月了,越来越感受到打好基础对于前端工程师的重要性,在向着狂拽酷炫的框架&构建工具高速狂奔之前,必须有一个坚实的基础打底,才不至于轻易翻车.所以博主最近一直在恶补<JS高级程序 ...
- js实现动态加载脚本的方法实例汇总
本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...
- 无阻塞加载外部js(动态脚本元素,XMLHttpRequest注入,LazyLoad)
动态脚本元素即在js中去创建<script>标签加载外部js并执行,这样加载的好处是文件的下载和执行过程不会阻塞页面的其他进程.通过下面两个例子对比出效果 <!DOCTYPE htm ...
- DOM动态脚本和动态样式
动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...
- Javascript高级编程学习笔记(43)—— 动态脚本
动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...
- 病毒木马查杀实战第025篇:JS下载者脚本木马的分析与防御
前言 这次我与大家分享的是我所总结的关于JS下载者脚本木马的分析与防御技术.之所以要选择这样的一个题目,是因为在日常的病毒分析工作中,每天都会遇到这类病毒样本,少则几个,多则几十个(当然了,更多的样本 ...
- 使用 SWFObject.js 插入Flash
今天学习了一下使用 SWFObject.js 这个js插入flash. 下载地址:http://code.google.com/p/swfobject/ 这个js的好处 1.IE中没有讨厌的虚框问题了 ...
- 初探JavaScript(二)——JS如何动态操控HTML
除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...
- js的动态加载、缓存、更新以及复用(四)
本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...
随机推荐
- lua 可变参数
问题:对可变参数传递的时候,采用如下方案: local cellData = {MsgText = msgText,Param = ...,CallBackFunc = callBackFunc,Ca ...
- 在winform中添加普通右键菜单
显示水平滚动条:点击GridControl的Run Designer在弹出的对话框中选择Views,将右侧属性窗口中OptionsView下的ColumnAutoWidth设置成false: 可以选择 ...
- SQL Sever 2008性能分析之执行计划
一直想找一些关于SQL语句性能调试的权威参考,但是有参考未必就能够做好调试 2的工作.我深信实践中得到的经验是最珍贵的,书本知识只是一个引导.本篇来源于<Inside Microsoft SQL ...
- 将类型(int,string,…)转换为 T 类型
方法定义: private static T GetValueByKey<T>(string key) where T : IConvertible { T localVal=defaul ...
- 使用swfupload上传超过30M文件,使用FLASH上传组件
原文:使用swfupload上传超过30M文件,使用FLASH上传组件 前一段时间会员的上传组件改用FLASH的swfupload来上传,既能很友好的显示上传进度,又能完全满足大文件的上传. 后来服务 ...
- maven基础学习
项目结构 src -main -java -package -test -java ...
- Java学习-044-文件拷贝
不用说了,又是一个经常用到的方法,直接上码了...敬请各位小主参阅!若有不足,敬请指正,非常感谢! 文件拷贝源码: /** * <strong>文件拷贝</strong>< ...
- Linux系统巡检常用命令
# uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostn ...
- java中BigDecimal加减乘除基本用法
Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处理16位有效数. 在实际应用中,需要对更大或者更小的数进 ...
- Android生成一维码
BitmapUtil.java里面添加个方法 /** * 用于将给定的内容生成成一维码 注:目前生成内容为中文的话将直接报错,要修改底层jar包的内容 * * @param content 将要生成一 ...