如何从一个 js 文件中加载所有脚本、样式表和标记？答案

【问题标题】：How to load all scripts, stylesheets, and markup from one js file?如何从一个 js 文件中加载所有脚本、样式表和标记？
【发布时间】：2010-10-22 05:34:52
【问题描述】：

以下小sn-p代码一旦部署就无法更改（它位于RIA中），因此必须通过bootstrapper.js文件加载所有内容：

<div id="someDivID"></div>
<script type="text/javascript" src="bootstrapper.js"></script>

加载所有 js、css 和标记的最佳方式是什么？有没有比以下更好（更干净、更快、更清晰）的方法？：

function createDivs() {
  var jsDiv = document.createElement('div');
  jsDiv.id = 'allJavascriptHere';

  var contentDiv = document.createElement('div');
  contentDiv.id = 'allContentHere';

  document.getElementById("someDivID").appendChild(jsDiv);
  document.getElementById("someDivID").appendChild(contentDiv);

  function importScript(url){
     var script = document.createElement('script');
     script.type = 'text/javascript';
     script.src = url;
     document.getElementById("jsDiv").appendChild(script);
  }

    importScript("http://example.com/jquery-1.4.2.min.js");
    importScript("http://example.com/anotherScript.js");
 }

 window.onload = function(){

   $.get("http://example.com/someHTML.html", function(data) {
      $('#contentDiv').html(data);
      setTimeout("javaScript.init()", 200);
   });
 }

someHTML.html 文件中的样式表如下：

<style type="text/css">
   @import url("example.com/styleSheet.css");
</style>

（注意：我不知道为什么需要setTimeout，但出于某种原因我需要。也许你的答案不需要它。）

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以使用 jQuery 的$.getScript() 来导入脚本。

我最近写了一个导入 CSS 的函数。

var getCss = function(file, callback) {

    if (typeof callback !== 'function') {
        throw 'Not a valid callback';
    };

    $.get(file, function(css) {

        var top = $('head > link[rel=stylesheet]').length ? $('head > link[rel=stylesheet]:last') : $('head > *:last'); 

        top.after('<link rel="stylesheet" type="text/css" href="' + file + '">');

        callback();

    });


};

【讨论】：

谢谢@alex！不使用css 有什么意义？即，为什么要调用 ajax？
@Emile 只是为了预加载它，所以当我链接到它时，我知道它已经下载并可以调用回调。如果我将收到的 CSS 放在 <style> 标签之间，那么相对 URL 将是错误的。当然我可以用正则表达式修复它们，但我发现这种方式更容易:)
@Emile 不用担心，该死的，我已经达到了代表上限！哈哈。 :D
..只有 200 人才能进入 20 强。祝你好运！
@alex ：这里的旧帖子，但我刚刚发现并实现了它以按需动态加载数据表插件。我发现我收到了 2 个对 css 的网络请求，一个 xmlhttp 和一个链接 rel。这应该发生吗？

【解决方案2】：

如果您的 css 也在那个 js 文件中，您可以简单地将 css 代码添加到文档样式标记中。它在某些情况下很有用，比如不允许使用不同的 css 文件等。

【讨论】：

【解决方案3】：

如果您希望以类似于$.getScript 的简单方式异步加载 CSS，请查看 loadCSS，这是一个独立的库，用于加载 CSS 而不依赖于 jQuery。

【讨论】：