最新公告
  • 欢迎您光临源码资源下载站,一个优质的网站源码和小程序源码分享基地。
  • 在JS文件中动态加载其他JS文件的方法

    正文概述 建站知识   2023-12-15 21:25:19  

      载另一个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);

    在JS文件中动态加载其他JS文件的方法
    皓玉源码网,一个优质的源码资源平台!
    皓玉源码网 » 在JS文件中动态加载其他JS文件的方法