在JS文件中加载另一个JS文件的教程

落日映苍穹つ 2024-03-16 17:50 12阅读 0赞

### 1、加载在头部 ###

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>js&nbsp;=&nbsp;document.createElement(</code><code>'script'</code><code>);</code></p> <p><code>js.src&nbsp;=&nbsp;</code><code>'myscript.js'</code><code>;</code></p> <p><code>document.getElementsByTagName(</code><code>'head'</code><code>)[0].appendChild(js);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

另一种写法是：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>js&nbsp;=&nbsp;document.createElement(</code><code>'script'</code><code>);</code></p> <p><code>js.src&nbsp;=&nbsp;</code><code>'myscript.js'</code><code>;</code></p> <p><code>document.head.appendChild(js);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 2、加载在BODY中 ###

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>js&nbsp;=&nbsp;document.createElement(</code><code>'script'</code><code>);</code></p> <p><code>js.src&nbsp;=&nbsp;</code><code>'myscript.js'</code><code>;</code></p> <p><code>document.body.appendChild(js);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

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

### 3、使用documentElement ###

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>js&nbsp;=&nbsp;document.createElement(</code><code>'script'</code><code>);</code></p> <p><code>js.src&nbsp;=&nbsp;</code><code>'myscript.js'</code><code>;</code></p> <p><code>var</code>&nbsp;<code>html&nbsp;=&nbsp;document.documentElement;</code></p> <p><code>html.insertBefore(js,&nbsp;html.firstChild);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 4、加载在第一个脚本前 ###

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>js&nbsp;=&nbsp;document.createElement(</code><code>'script'</code><code>);</code></p> <p><code>js.src&nbsp;=&nbsp;</code><code>'myscript.js'</code><code>;</code></p> <p><code>var</code>&nbsp;<code>first&nbsp;=&nbsp;document.getElementsByTagName(</code><code>'script'</code><code>)[0];</code></p> <p><code>first.parentNode.insertBefore(js,&nbsp;first);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>js&nbsp;=&nbsp;document.createElement(</code><code>'script'</code><code>);</code></p> <p><code>js.src&nbsp;=&nbsp;</code><code>'myscript.js'</code><code>;</code></p> <p><code>var</code>&nbsp;<code>first&nbsp;&nbsp;=&nbsp;document.getElementsByTagName(</code><code>'script'</code><code>);&nbsp;</code></p> <p><code>var</code>&nbsp;<code>here&nbsp;=&nbsp;first[first.length-1];&nbsp;</code></p> <p><code>here.parentNode.insertBefore(js,here);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>js&nbsp;=&nbsp;document.createElement(</code><code>'script'</code><code>);</code></p> <p><code>js.src&nbsp;=&nbsp;</code><code>'myscript.js'</code><code>;</code></p> <p><code>var</code>&nbsp;<code>first&nbsp;&nbsp;=&nbsp;document.getElementsByTagName(</code><code>'script'</code><code>);&nbsp;</code></p> <p><code>var</code>&nbsp;<code>here&nbsp;=&nbsp;first[first.length-1];&nbsp;</code></p> <p><code>here.parentNode.appendChild(js);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>link&nbsp;=&nbsp;document.createElement(</code><code>'link'</code><code>);</code></p> <p><code>link.setAttribute(</code><code>'type'</code><code>,&nbsp;</code><code>'text/css'</code><code>);</code></p> <p><code>link.setAttribute(</code><code>'rel'</code><code>,&nbsp;</code><code>'stylesheet'</code><code>);</code></p> <p><code>link.setAttribute(</code><code>'href'</code><code>,&nbsp;</code><code>'mycss.css'</code><code>);</code></p> <p><code>document.head.appendChild(link);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>meta&nbsp;=&nbsp;document.createElement(</code><code>'meta'</code><code>);</code></p> <p><code>meta.setAttribute(</code><code>'name'</code><code>,</code><code>'viewport'</code><code>);</code></p> <p><code>meta.setAttribute(</code><code>'content'</code><code>,</code><code>'width=device-width,&nbsp;initial-scale=1'</code><code>);</code></p> <p><code>document.head.appendChild(meta);</code></p> </td> 
  </tr> 
 </tbody> 
</table>