原文章：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插入动态脚本的更多相关文章

  1. 【前端基础】动态脚本与JSONP

    博主入职两个月了,越来越感受到打好基础对于前端工程师的重要性,在向着狂拽酷炫的框架&构建工具高速狂奔之前,必须有一个坚实的基础打底,才不至于轻易翻车.所以博主最近一直在恶补<JS高级程序 ...

  2. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  3. 无阻塞加载外部js(动态脚本元素，XMLHttpRequest注入，LazyLoad)

    动态脚本元素即在js中去创建<script>标签加载外部js并执行,这样加载的好处是文件的下载和执行过程不会阻塞页面的其他进程.通过下面两个例子对比出效果 <!DOCTYPE htm ...

  4. DOM动态脚本和动态样式

    动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...

  5. Javascript高级编程学习笔记（43）—— 动态脚本

    动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...

  6. 病毒木马查杀实战第025篇：JS下载者脚本木马的分析与防御

    前言 这次我与大家分享的是我所总结的关于JS下载者脚本木马的分析与防御技术.之所以要选择这样的一个题目,是因为在日常的病毒分析工作中,每天都会遇到这类病毒样本,少则几个,多则几十个(当然了,更多的样本 ...

  7. 使用 SWFObject.js 插入Flash

    今天学习了一下使用 SWFObject.js 这个js插入flash. 下载地址:http://code.google.com/p/swfobject/ 这个js的好处 1.IE中没有讨厌的虚框问题了 ...

  8. 初探JavaScript（二）——JS如何动态操控HTML

    除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...

  9. js的动态加载、缓存、更新以及复用（四）

    本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...

随机推荐

  1. JDK API从下载到使用

    经常有人问我一些java常用类的使用方法,还有一些问某个常用类是干啥的.这些问题都是不会查询jdk api,对常用类的方法不熟悉等情况.于是,经过再三思考决定编写jdk api查询使用手册. ☆准备工 ...

  2. css：使用笔记(不断更新中...)

    1,inline-block Inline :1是不支持宽高的 2 在一行内显示 span 啥的~ Block:1,占一行 2支持宽高 但是img因为在一行并排显示,我们归为行(内嵌)元素,但支持设置 ...

  3. Codeforces Round #375 (Div. 2) A B C D F

    A 数轴上有三个人要到一个点去过年 使三个人走路距离的和最小  让两边的人都走到中间那个点即可 B 给出一个字符串 其中有_ ( ) 三种字符和英文字母 连续的英文字母是一个单词 括号对中不会套括号对 ...

  4. MySQL Access denied for user root@localhost 解决方法

    今天把本地开发的项目(ThinkPHP 3.2.3)移到虚拟机上(CentOS 6.6,LNMP 1.2,MySQL 5.6.23),配置好 MySQL 之后访问首页,出现: 此时 MySQL 的用户 ...

  5. linux命令学习（2）：wc 命令

    Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1．命令格式: wc [选项]文件... 2．命令功能: 统计指定文件中的字节数. ...

  6. Android RSA加密解密

    概述 RSA是目前最有影响力的公钥加密算法,该算法基于一个十分简单的数论事实:将两个大素数相乘十分容易,但那时想要对其乘积进行因式分解却极其困 难,因此可以将乘积公开作为加密密钥,即公钥,而两个大素数 ...

  7. 解决python "Non-ASCII character"错误

    原文http://jingyan.baidu.com/article/219f4bf7d04887de442d3899.html 1.出现问题的原因:程序中的编码错误,python默认是acii模式, ...

  8. Wordpress本地伪静态设置

    遇到的问题: 在主题的目录页,用wordpress默认链接方式是的,但是改了固定链接结构为:/%post_id%.html后,就访问不了了,开始以为是我主题的问题,然后切换为官方主题也是访问不了,而神 ...

  9. Nginx下Magento伪静态规则，适用于LNMP一键包

    文件名为:magento.conf(下载),将其放在 /usr/local/nginx/conf/ 文件夹下 然后在 /usr/local/nginx/conf/vhost/www.yourname. ...

  10. RFC-2068-http

    本文档规定了互联网社区的标准组协议,并需要讨论和建议以便更加完善.请参考 “互联网官方协议标准”(STD 1)来了解本协议的标准化状态.本协议不限流传发布. 版权声明 Copyright (C) Th ...