在JS文件中加载JS文件的方法

2021-11-05 1,702 2

在很多情况下,我们会遇到一个问题,就是如何在一个Javascript文件里,再加载另一个Javascript文件,并完成一定的功能,如何实现一个JS文件加载另一个JS文件呢?

有些人使用document.write的方式来加载js,这种方法有很多问题,并不推荐使用这种方法。

这里就介绍几种常见的调用方法。

先创建一个公共的脚本文件如下:

var js = document.createElement('script');
js.src = 'myscript.js';

接着通过几种不同的方法将该脚本加载。

1、加载在头部

var js = document.createElement('script');
js.src = 'myscript.js';
document.getElementsByTagName('head')[0].appendChild(js);

另一种写法是:

var js = document.createElement('script');
js.src = 'myscript.js';
document.head.appendChild(js);

2、加载在BODY中

加载在页面中的写法如下:

var js = document.createElement('script');
js.src = 'myscript.js';
document.body.appendChild(js);

这种加载方法存在一个问题,就是有可能代码是在head区域,导致body还没达到,document.body就不存在,代码就会出错。

3、使用documentElement

document.documentElement就是html文档本身,因此肯定是存在的,这种调用的写法如下:

var js = document.createElement('script');
js.src = 'myscript.js';
var html = document.documentElement;
html.insertBefore(js, html.firstChild);

4、加载在第一个脚本前

这种方法是把js文件插入到第一个出现script的标识前,除非网页里没有任何一个script出现,否则应该不会出错。代码的写法如下:

var js = document.createElement('script');
js.src = 'myscript.js';
var first = document.getElementsByTagName('script')[0];
first.parentNode.insertBefore(js, first);

相关文章

一款用过就离不开的文件传输软件
搞自媒体初期,不要轻易让身边人知道!
做网站,选择静态生成页,还是伪静态页面呢?
还在用 WordPress?推荐国产建站程序JPress
一名运维小哥对运维规则的10个总结
一款功能强大的开源 IP 查询工具

评论(2)

回复 羽度非凡 取消回复