Javascript 未加载动态添加的CSS文件_Javascript_Jquery_Css

Javascript 未加载动态添加的CSS文件

javascript jquery css

Javascript 未加载动态添加的CSS文件,javascript,jquery,css,Javascript,Jquery,Css,我正在创建一个Javascript小部件，它使用angular和NVD3库来显示某些图形。在包含生成这些图形代码的服务器中的脚本文件中，除了NVD3用于正确渲染其元素的CSS文件nv.d3.CSS之外，我还添加了动态添加指向这些库的脚本文件的代码： loadScript('http://localhost:3000/javascript/bower_components/angular/angular.js'); loadScript('http://localhost:3000/javascr

我正在创建一个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文件中，但它没有被使用，因为没有选择图形的样式。我试图将文件添加到头部而不是正文中，但同样的意外行为也发生了。

有人知道问题出在哪里吗？提前感谢

您混合了两种方法向页面添加CSS。可以使用样式标记或链接标记

通过使用样式标记，您不能使用href，因此在您的情况下，您必须使用链接方法：

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)

您混合了两种方法来向页面添加CSS。可以使用样式标记或链接标记

通过使用样式标记，您不能使用href，因此在您的情况下，您必须使用链接方法：

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)

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

引自：

基础这方面最基本的实现只需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 );

或者，如果您希望通过回调来维护其范围/上下文，您可以执行以下操作：

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

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

引自：

基础这方面最基本的实现只需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 );

或者，如果您希望通过回调来维护其范围/上下文，您可以执行以下操作：

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

也许你应该在头上附加css节点，但在身体上

您可以尝试：

$('head').append(css)

也许你应该在头上附加css节点，但在身体上

您可以尝试：

$('head').append(css)

正是我想指出的，链接和样式标记的组合不起作用。正是我想指出的，链接和样式标记的组合不起作用。