教程：如何在JS文件中引入另一个JS文件

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：js教程

在JS文件中加载另一个JS文件，可以使用` ``` 在这个例子中，`main.js`文件将被加载到当前HTML文件中。

1、加载在头部

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

另一种写法是：

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

2、加载在BODY中

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

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

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

3、使用documentElement

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

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

4、加载在第一个脚本前

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

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

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

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

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

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

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

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

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

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

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