Question

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

我想要这样做的原因是将客户端包括在内。我有几个.js文件已经用客户端需要的函数编写。客户端将拥有一个html文件，他/她使用.js文件包含（我的.js文件）。

我可以重写一个包含其中所有函数的新.js文件，或者为了避免重复工作，找出一种方法来编写包含其他.js的{{1}}文件文件。

Answer 1

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

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

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

x.onload=callback_function;

Answer 2

浏览器加载时间的最佳解决方案是使用服务器端脚本将它们全部连接成一个大的.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();
 });

Answer 3

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

您可以做的是按需加载脚本。（再次使用类似于Ignacio所提到的东西，但更清洁）。

检查此链接有多种方法： http://ajaxpatterns.org/On-Demand_Javascript

我最喜欢的是（不总是适用）：

<script src="dojo.js" type="text/javascript">
dojo.require("dojo.aDojoPackage");

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

Answer 4

解决从HTML文件中减少JavaScript引用问题的一种流行方法是使用Sprockets之类的连接工具，它将JavaScript源文件预处理和连接在一起。

除了减少HTML文件的引用数量外，这也会减少服务器的点击次数。

然后，您可能希望通过像jsmin这样的缩小工具运行生成的连接，以使其缩小。

Answer 5

我使用@ gnarf的方法，虽然我回到document.writeln IE {7}的<script>标签，因为我无法让IE创建在IE6中可靠地工作（并且TBH没有小心翼翼地付出很多努力）。我的代码的核心是：

if (horus.script.broken) {
    document.writeln('<script type="text/javascript" src="'+script+'"></script>');   
    horus.script.loaded(script);
} else {
    var s=document.createElement('script');
    s.type='text/javascript';
    s.src=script;
    s.async=true;

    if (horus.brokenDOM){
        s.onreadystatechange=
            function () {
                if (this.readyState=='loaded' || this.readyState=='complete'){
                    horus.script.loaded(script);
                }
        }
    }else{
        s.onload=function () { horus.script.loaded(script) };
    }

    document.head.appendChild(s);
}

其中horus.script.loaded()注意到javascript文件已加载，并调用任何挂起的未调用例程（由自动加载器代码保存）。

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

5 个答案: