2011-01-26 64 views
0

我目前黑客在一起時,我通過iframe嵌入到網站上的日曆應用程序,但我已經在Internet Explorer遇到錯誤IE8 iframe中無法成功運行JS/CSS代碼

function BuildListView(startday, l, events, config){ 
     var cc = '<div id="myGrid" style="width:95%;height:95%;"></div>'; 
     var html = []; 
     html.push(cc); 
     html.push('<link rel="stylesheet" href="../slickgrid/slick.grid.css" type="text/css" media="screen" charset="utf-8" /> '); 
     html.push('<link rel="stylesheet" href="../slickgrid/css/smoothness/jquery-ui-1.8.2.custom.css" type="text/css" media="screen" charset="utf-8" /> '); 
     html.push('<link rel="stylesheet" href="../slickgrid/examples/examples.css" type="text/css" media="screen" charset="utf-8" /> '); 

     html.push('<script language="JavaScript" src="../slickgrid/lib/jquery.event.drag-2.0.min.js"></script>'); 
     html.push('<script language="JavaScript" src="../slickgrid/slick.grid.js"></script>'); 
     gridcontainer.html(html.join("")); 
     html = null; 

     var grid; 

     var columns = [ 
      {id:"event", name:"Event", field:"event",width:300}, 
      {id:"start", name:"Start", field:"start",width:175}, 
      {id:"finish", name:"Finish", field:"finish",width:175}, 
      {id:"location", name:"Location", field:"location",width:200} 
     ]; 

     function sortByStart(a, b) { 
      var x = a.start.toLowerCase(); 
      var y = b.start.toLowerCase(); 
      return ((x < y) ? -1 : ((x > y) ? 1 : 0)); 
     } 

     var options = { 
      enableCellNavigation: false, 
      enableColumnReorder: false, 
      rowCssClasses: function(item) { 
       // if a task is 100% done then its row gets an additional CSS class 
       return (item.event == "Task 0") ? 'complete' : ''; 
      } 

     }; 

      $.getJSON("../cal.php", function(json) { 
       var data = []; 
       var i=0; 
       $.each(json.events, function(index, event) { 
         data[i++] = { 
          event: event[1], 
          start: event[2], 
          finish: event[3], 
          location: event[9], 
         }; 

       }); 
       data.sort(sortByStart); 

       $.each(data,function(index, value){ 
        value.start = (new Date(value.start)).toUTCString(); 
        value.finish = (new Date(value.finish)).toUTCString(); 
       }) 


       grid = new Slick.Grid($("#myGrid"), data, columns, options); 
      }); 



    } 

髒我知道,這項工作很好加載自己和在FF /鉻iframes,但在IE最終通話

grid = new Slick.Grid($("#myGrid"), data, columns, options); 

是造成問題。同樣的事情發生時,我註釋掉CSS文件,所以我假設這是一個後加載CSS錯誤。什麼會阻止iframe被修改的CSS?

+0

這是一個有點朦朧,很難進入。究竟哪個不起作用,有什麼確切的錯誤信息? – 2011-01-26 12:26:35

+0

確實沒有任何錯誤消息,所有的數據都被加載,這只是CSS從未應用。 – wwweh 2011-01-26 12:43:31

回答

3

你檢查過你的DOCTYPE嗎?某些DOCTYPE在FF/Chrome中觸發標準模式,但在IE8中則爲Quirks模式。 SlickGrid在Quirks模式下不起作用(不奇怪!)。我只是固定的改變這是一個非常類似的問題:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

這樣:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

See this article for more info.