文档章节

使用js动态加载外部js文件以及动态创建script脚本

Bing309
 Bing309
发布于 10/17 15:33
字数 745
阅读 19
收藏 0

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

本文转载自:https://www.cnblogs.com/lr-blog/p/7771615.html

Bing309
粉丝 0
博文 46
码字总数 9795
作品 0
浦东
前端工程师
私信 提问
高性能Javascript--脚本的无阻塞加载策略

Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题。 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 。原因是,事实上,大多数浏览器使用单进程处理UI和更...

Junn
2014/10/10
350
2
JavaScript的性能优化:加载和执行

js最大的问题是:无论当前JavaScript代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript执行过程耗时越久,浏览器等待响应用户输入的时间就越长。浏览器...

EDIAGD
2013/09/07
2.4K
14
javascript性能优化:创建javascript无阻塞脚本

  javaScript 在浏览器中的运行性能,在web2.0时代显得尤为重要,成千上万行javaScript代码无疑会成为性能杀手, 在较低版本的浏览器执行JavaScript代码的时候,由于浏览器只使用单一进程来...

grootzhang
2016/04/13
0
0
探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密

下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome:   在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问百度首...

小近
2014/11/10
346
0
async与defer的作用与区别以及阻塞优化

async和defer的作用是什么?有什么区别? 1. 在浏览器在渲染时,在html文件中读取 (异步下载)会下载脚本,但是不会立即执行,并且不一定按照script顺序触发;这种方式加载的 JavaScript 依然会...

自渡1998
05/05
73
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 —— 你已经是个成熟的熊猫了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @Sharon啊 :#今日歌曲推荐# 分享黑鸭子的单曲《羞答答的玫瑰静悄悄的开》 《羞答答的玫瑰静悄悄的开》- 黑鸭子 手机党少年们想听歌,请使劲儿...

小小编辑
6分钟前
16
3
结合Spring Security进行web应用会话安全管理

在本文中,将为大家说明如何结合Spring Security 和Spring Session管理web应用的会话。 一、Spring Security创建使用session的方法 Spring Security提供4种方式精确的控制会话的创建: alwa...

fightinging
11分钟前
2
0
83、Mybatis和Hibernate重要区别

Mybatis;入门简单,程序容易上手开发,节省开发成本。Mybatis需要程序猿自己编写sql语句,是一个不完全的ORM框架,对sql修改和优化非常容易实现。 Mybatis适合开发需求变更频繁的系统,比如...

lianbang_W
今天
5
0
设计模式之状态模式

定义 Allow an object to alter its behavior when its internal state changes.The object will appear to change its class.(当一个对象内在状态改变时允许其改变行为,这个对象看起来像改...

陈年之后是青葱
今天
6
0
Python常用模块之os.path

os.path.abspath(path) 输入相对路径,返回绝对路径 Python 3.7.0 (v3.7.0:1bf9cc5093, Jun 27 2018, 04:59:51) [MSC v.1914 64 bit (AMD64)] on win32Type "copyright", "credits" or "lic......

松鼠大帝
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部