首页 / 个人笔记 /

在JS文件中动态加载其他JS文件的方法

2022-10-07 11:49:53个人笔记阅读 0

载另一个Javascript文件,并完成一定的功能,如何实现一个JS文件加载另一个JS文件呢?

有些人使用[xss_clean]的方式来加载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[xss_clean].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[xss_clean].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[xss_clean].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);

猜你喜欢

  • 帝国CMS插件

    帝国CMS7.5自动定时审核发布插件和自动提交百度插件

    帝国CMS7.5自动定时审核发布插件插件功能1、可以自定义栏目审核顺序,2、可以指定每天审核总量3、依次每个栏目审核3条,知道审核完当天的数量插件教程1、上传目录autosh到/e/extend/目录,2、修改文件//自定义审核栏目顺序 可以不设置//$classlit="4";//PC百度token$yuming="http://www.laoluo88.com";//结尾不带/$token="

    2022-04-10 3559
  • 帝国CMS插件

    帝国CMS自动标题图片并随机插入正文内容的插件

    插件功能1、可以将文章标题自动设置为标题图片2、背景图片随机3、文字过多会自动变成2行,4,更多定制功能请联系站长定制5、php版本最高为7.1插件安装方法(请先备份网站)1、下载插件2、将插件上传至网站/e/extend/目录,3、找多张背景图片,将图片得宽度统一调整为500px,将图片放进src文件夹;4、访问网站地址/e/extend/autopic/action.php?pwd=36152

    2022-04-10 3559
  • 帝国CMS插件

    帝国cms付费可复制+下载word插件+关注公众号下载功能

    本插件支持的支付接口:虎皮椒微信,虎皮椒支付宝温馨提示:接口开通需开通带H5支付功能帝国cms付费可复制插件功能1、付费复制内容2、付费正文内容转word下载3、关注公众号免费下载内容,可以定义每天下载次数,可以关闭。多个公众号随机。4、免费下载用完跳转到付费下载5、实现不用登陆即可付费下载或者复制6、插件没有改变程序核心代码7、可以统一资源价格,也可以单独为某篇资源价格8、插件是响应式,PC和移

    2022-04-14 3559