在 JS 文件中加载 JS 文件的方法 - 月光博客

> 本文由 [简悦 SimpRead](http://ksria.com/simpread/) 转码， 原文地址 [www.williamlong.info](https://www.williamlong.info/archives/6597.html)

[![](https://www.williamlong.info/logo/Programming.gif)](https://www.williamlong.info/tag/Programming.html)

在很多情况下，我们会遇到一个问题，就是如何在一个 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);

5、加载在当前 JS 文件之前或之后

这种方法是把 js 文件插入到目前所在的 js 文件前，代码的写法如下：

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

加载在当前 js 文件之后，代码的写法如下：

var js = document.createElement('script');  
js.src = 'myscript.js';  
var first  = document.getElementsByTagName('script');   
var here = first[first.length-1];   
here.parentNode.appendChild(js);

附录：1、在 JS 文件里加载 CSS 文件

```
var link = document.createElement('link');
link.setAttribute('type', 'text/css');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'mycss.css');
document.head.appendChild(link);
```

附录：2、在 JS 文件里设置 META

```
var meta = document.createElement('meta');
meta.setAttribute('name','viewport');
meta.setAttribute('content','width=device-width, initial-scale=1');
document.head.appendChild(meta);
```

![](https://www.williamlong.info/logo/Programming.jpg)