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

随心笔谈2年前发布 编辑
135 0
🌐 经济型:买域名、轻量云服务器、用途:游戏 网站等 《腾讯云》特点:特价机便宜 适合初学者用 点我优惠购买
🚀 拓展型:买域名、轻量云服务器、用途:游戏 网站等 《阿里云》特点:中档服务器便宜 域名备案事多 点我优惠购买
🛡️ 稳定型:买域名、轻量云服务器、用途:游戏 网站等 《西部数码》 特点:比上两家略贵但是稳定性超好事也少 点我优惠购买

1、加载在头部

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

另一种写法是:

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

2、加载在BODY中

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

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

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

3、使用documentElement

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

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

4、加载在第一个脚本前

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

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

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

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

1
2
3
4
5
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文件之后,代码的写法如下:

1
2
3
4
5
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文件

1
2
3
4
5
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

1
2
3
4
var meta = document.createElement('meta');
meta.setAttribute('name','viewport');
meta.setAttribute('content','width=device-width, initial-scale=1');
document.head.appendChild(meta);
© 版权声明

相关文章