如何從一個js文件加載所有腳本，樣式表和標記？

Question

以下一小段代碼一經部署（在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文件中包含樣式表，如下someHTML.html ：

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

（注意：我不知道為什么需要setTimeout但是出於某些原因，我確實需要。也許您的答案將不需要它。）

Answer 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();

    });


};

Answer 2

如果您希望以類似於$.getScript的簡單方式異步加載CSS，請查看loadCSS ，這是一個獨立的庫，用於加載CSS，而無需依賴jQuery。

Answer 3

如果您的CSS也位於該js文件中，則只需將CSS代碼添加到文檔樣式標簽中即可。 在某些情況下，例如不允許使用不同的css文件的情況下，它可能很有用。