動態加載的CSS文件未加載

Question

我正在創建一個Javascript小部件，該小部件使用angular和NVD3庫顯示某些圖形。 在包含用於生成這些圖形的代碼的腳本文件（位於服務器中）中，除了NVD3使用的CSS文件（nv.d3.css），我還添加了用於動態添加指向這些庫的腳本文件的代碼。正確渲染其元素：

loadScript('http://localhost:3000/javascript/bower_components/angular/angular.js');
loadScript('http://localhost:3000/javascript/bower_components/d3/d3.js');
loadScript('http://localhost:3000/javascript/bower_components/nvd3/build/nv.d3.js');
loadScript('http://localhost:3000/javascript/bower_components/angular-nvd3/dist/angular-nvd3.js');

var css = document.createElement('style');
css.type = 'text/css';
css.setAttribute('src', 'http://localhost:3000/javascript/bower_components/nvd3/build/nv.d3.css');
$("body").append(css);

function loadScript(address){
    var angularnvd3Script = document.createElement('script');
    angularnvd3Script.setAttribute('type', 'text/javascript');
    angularnvd3Script.setAttribute('src', address);
    $("body").append(angularnvd3Script);
}

嵌入窗口小部件的客戶端應用程序運行時，腳本已成功加載，從數據角度正確顯示了圖形，客戶端HTML文件中似乎也正確添加了CSS文件，但未使用它，因為圖表的樣式未選取。 我試圖將文件添加到頭部而不是正文中，但是會發生相同的意外行為。 有人知道問題可能在哪里嗎？ 提前致謝

Answer 1

好吧，您正在混合兩種將CSS添加到頁面的方法。 您可以使用style標簽或link標簽。

通過使用style標簽，您不能使用href因此在這種情況下，您必須使用link方法：

var link = document.createElement('link')
link.setAttribute('rel', 'stylesheet')
link.setAttribute('type', 'text/css')
link.setAttribute('href', 'http://localhost:3000/javascript/bower_components/nvd3/build/nv.d3.css')
document.getElementsByTagName('head')[0].appendChild(link)

Answer 2

不幸的是，大多數現代瀏覽器都不支持樣式表的加載。 我發現有一點谷歌搜索解決方案。

引自： http : //thudjs.tumblr.com/post/637855087/stylesheet-onload-or-lack-thereof

基礎

最基本的實現可以通過大約30行（獨立於框架）JavaScript代碼完成：

function loadStyleSheet( path, fn, scope ) {
   var head = document.getElementsByTagName( 'head' )[0], // reference to document.head for appending/ removing link nodes
       link = document.createElement( 'link' );           // create the link node
   link.setAttribute( 'href', path );
   link.setAttribute( 'rel', 'stylesheet' );
   link.setAttribute( 'type', 'text/css' );

   var sheet, cssRules;
// get the correct properties to check for depending on the browser
   if ( 'sheet' in link ) {
      sheet = 'sheet'; cssRules = 'cssRules';
   }
   else {
      sheet = 'styleSheet'; cssRules = 'rules';
   }

   var interval_id = setInterval( function() {                     // start checking whether the style sheet has successfully loaded
          try {
             if ( link[sheet] && link[sheet][cssRules].length ) { // SUCCESS! our style sheet has loaded
                clearInterval( interval_id );                      // clear the counters
                clearTimeout( timeout_id );
                fn.call( scope || window, true, link );           // fire the callback with success == true
             }
          } catch( e ) {} finally {}
       }, 10 ),                                                   // how often to check if the stylesheet is loaded
       timeout_id = setTimeout( function() {       // start counting down till fail
          clearInterval( interval_id );             // clear the counters
          clearTimeout( timeout_id );
          head.removeChild( link );                // since the style sheet didn't load, remove the link node from the DOM
          fn.call( scope || window, false, link ); // fire the callback with success == false
       }, 15000 );                                 // how long to wait before failing

   head.appendChild( link );  // insert the link node into the DOM and start loading the style sheet

   return link; // return the link node;
}

這將允許您使用如下的onload回調函數加載樣式表：

loadStyleSheet( '/path/to/my/stylesheet.css', function( success, link ) {
   if ( success ) {
      // code to execute if the style sheet was loaded successfully
   }
   else {
      // code to execute if the style sheet failed to successfully
   }
} );

或者，如果您希望回調保持其范圍/上下文，則可以執行以下操作：

loadStyleSheet( '/path/to/my/stylesheet.css', this.onComplete, this );

Answer 3

可能是您應該將css節點附加在頭上，但要附加到正文上！

你可以試試：

$('head').append(css)