0

javascript を使用して css ファイルを動的に読み込もうとしていますが、しばらくの間はうまくいくと思います。しかし、次の瞬間、ページ上の要素が css ファイルから「幅」を取得していないことに気付きました。他のすべての作業は問題ありません。同じページから chrome ブラウザーで css をチェックすると、完全にロードされています。私は何を間違えましたか？

css/js ファイルをロードするためのスクリプト (Web で見つけました):

function loadjscssfile(filename, filetype){
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
    }
}

そして他のjqueryコード：

$(this).addClass('iG_Main');
loadjscssfile(data.theme_url,'css');
createGrid($($(this).selector+'.iG_Main'));

function createGrid( selector ){
    var cellWidth, columnValue;
    var blank = ' ';


    selector.append('<div class="iG_Header"></div>');
    selector.append('<div class="iG_Container"></div>');
    selector.append('<div class="iG_Footer">This is footer!</div>');
    selector_header = selector.children('.iG_Header');
    selector_container = selector.children('.iG_Container');
    selector_footer = selector.children('.iG_Footer');
    selector_header.append('<div class="iG_Cell iG_CheckBox inHead"><div id="iG_CheckBox">'+ blank +'</div></div>');

    if(undefinedVal(data.width))
        data.width = 1000;
    if(undefinedVal(data.height))
        data.height = 400;

    for(var i in data.headerData)
        selector_header.append('<div id="'+ data.headerData[i].name +'" class="iG_Cell inHead"><div>'+ data.headerData[i].label +'</div></div>');

    if(data.options){
        selector_header.append('<div class="iG_Cell Options inHead"><div>'+ blank +'</div></div>');
    //  cellWidth = (data.width-40-15)/(data.headerData.length);
        cellWidth = (data.width-$('.iG_Cell.inHead.Options').width()-selector_header.children('.iG_CheckBox').width())/(data.headerData.length);
    }else cellWidth = (data.width-15-selector_header.children('.iG_CheckBox').width())/(data.headerData.length); //15 - in sake of scrollbar
    //}else cellWidth = (data.width-15-40)/(data.headerData.length); //15 - in sake of scrollbar

    for(var i in data.contentData){
        selector_container.append('<div class="iG_Content"></div>');
        selector_container.children('.iG_Content:last-child').append('<div class="iG_Cell iG_CheckBox inContent"><div id="iG_CheckBox">'+ blank +'</div></div>');
        for(var j in data.headerData){
            columnValue = (undefinedVal(data.contentData[i][data.headerData[j].name])) ? blank : data.contentData[i][data.headerData[j].name];
            selector_container.children('.iG_Content:last-child').append('<div class="iG_Cell"><div>'+ columnValue +'</div></div>');
        }


    selector.css({'width':data.width, 'height':data.height});
    selector_header.children('.iG_Cell').not('.Options').not('.iG_CheckBox').css('width',cellWidth);
    selector_container.children('.iG_Content').children('.iG_Cell').not('.iG_CheckBox').css('width',cellWidth);
    selector_container.css('height', data.height-selector_header.height()-selector_footer.height());
}
4

2 に答える 2

1

この質問を見てください。受け入れられた回答のコードを使用すると役立つ場合があります。したがって、コードは次のようになります。

var currentItem = $(this);
currentItem.addClass('iG_Main');
loadStyleSheet( data.theme_url + '.css', function( success, link ) {
    createGrid($(currentItem.selector+'.iG_Main'));
});
于 2012-11-23T09:37:31.923 に答える
1

CSS をロードする方法は JS の実行とは非同期であるため、CSS がロードされる前にコードが実行される場合があります。

このような問題を回避するには、インライン スタイルを作成し、CSS ファイルに XHR リクエストを実行して、コンテンツをスタイル要素に配置します。たとえば、次のようになります。

$.get(the_url, function(response) {
  $('head').append('<style id="the_theme"></style>');
  $('#the_theme').text(response);

  // do the rest
});

編集: もちろん、これは相対 URL で問題を引き起こす可能性があり、現在はドキュメントに対して相対であり、CSS ファイルに対してではありません。これが問題になる場合は、複雑な方法で行う必要があります。一定間隔でルールの長さを確認します。

cssLoaded = 0;
var iv = window.setInterval(function() {
  var cssStylesheet = document.getElementById("the_link_element");
  if(cssStylesheet.sheet && cssStylesheet.sheet.cssRules.length > 0) {
    cssLoaded = 1;
  }
  else if(cssStylesheet.styleSheet && cssStylesheet.styleSheet.cssText.length > 0) {
    cssLoaded = 1;
  }
  else if(cssStylesheet.innerHTML && cssStylesheet.innerHTML.length > 0) {
    cssLoaded = 1;
  }

  if(cssLoaded) {
    window.clearInterval(iv);
  }
}, 500);
于 2012-11-23T09:31:09.007 に答える