在.js文件中包含.js文件

Yo *_*mma 87 javascript

我想知道是否可以.js在另一个.js文件中包含文件?

我想要这样做的原因是将客户包括在内.我有几个.js文件已经用客户端需要的函数编写.客户端将有一个html文件,他/她使用.js文件include(我的.js文件)管理.

我可以重写一个.js包含所有函数的新文件,或者为了避免做双重工作,找出一种方法来编写.js包含其他.js文件的文件.

YOU*_*YOU 42

我基本上喜欢这样,创建新元素并将其附加到 <head>

var x = document.createElement('script');
x.src = 'http://example.com/test.js';
document.getElementsByTagName("head")[0].appendChild(x);
Run Code Online (Sandbox Code Playgroud)

您也可以onload对附加的每个脚本使用事件,但请测试一下,我不确定它是否可以跨浏览器工作.

x.onload=callback_function;
Run Code Online (Sandbox Code Playgroud)

  • 由于它是异步的,我不确定它们是否会按照您期望的顺序到达 (5认同)

gna*_*arf 11

浏览器加载时间的最佳解决方案是使用服务器端脚本将它们全部连接成一个大的.js文件.确保gzip/minify最终版本.单一要求 - 漂亮而紧凑.

或者,您可以使用DOM创建<script>标记并在其上设置src属性,然后将其附加到<head>.如果您需要等待加载该功能,则可以从该load脚本标记上的事件中调用其余的javascript文件.

此函数基于jQuery的功能 $.getScript()

function loadScript(src, f) {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.src = src;
  var done = false;
  script.onload = script.onreadystatechange = function() { 
    // attach to both events for cross browser finish detection:
    if ( !done && (!this.readyState ||
      this.readyState == "loaded" || this.readyState == "complete") ) {
      done = true;
      if (typeof f == 'function') f();
      // cleans up a little memory:
      script.onload = script.onreadystatechange = null;
      head.removeChild(script);
    }
  };
  head.appendChild(script);
}

// example:
loadScript('/some-other-script.js', function() { 
   alert('finished loading');
   finishSetup();
 });
Run Code Online (Sandbox Code Playgroud)


rAm*_*rAm 6

没有直接的方法可以做到这一点。

您可以做的是按需加载脚本。(再次使用类似于 Ignacio 提到的内容,但更简洁)。

查看此链接以了解执行此操作的多种方法:http : //ajaxpatterns.org/On-Demand_Javascript

我最喜欢的是(并不总是适用):

<script src="dojo.js" type="text/javascript">
dojo.require("dojo.aDojoPackage");
Run Code Online (Sandbox Code Playgroud)

谷歌的关闭也提供了类似的功能。