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);
}

当嵌入小部件的客户端应用程序运行时，脚本成功加载，从数据的角度正确显示图形，CSS文件似乎也在客户端HTML文件中正确添加，但它没有被使用，因为图形的样式没有被选中。我试图在头部而不是正文中添加文件，但会发生同样的意外行为。有谁知道问题出在哪里？提前致谢

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

不幸的是，在大多数现代浏览器中，样式表没有onload支持。我用一点谷歌搜索找到了一个解决方案。

引自： 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)

未加载动态添加的CSS文件

3 个答案:

基础知识