2013-06-18 204 views
0

我今天在這裏談到了跨瀏覽器問題。我的代碼完美呈現在Chrome和Firefox上,但它在IE上呈現空白頁面。網頁在IE中呈現空白

每當我在IE中調試時,在jQuery代碼片段中觸發的錯誤是「$ is undefined」或「Object Expected」。

enter image description here

設置:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<link rel="stylesheet" type="text/css" href="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jquery.ui.datepicker.mobile.css"></link> 
<script src="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jQuery.ui.datepicker.js"></script> 
<script src="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script> 

這裏是觸發錯誤jQuery的片段之一:

$(function(){ 
    $("#accordionDemo").accordion({ 
     header : "h3", 
     active: false, 
     alwaysOpen:false, 
     fillSpace:false, 
     collapsible:true, 
    }); 
}); 

的HTML是相當簡單的。我只是在身體上使用一個腳本,如 $('#home').append('<div id="accordionDemo"><b>Sample Code</b></div>');

我有代碼內的div的方式。我只是將示例代碼編寫爲佔位符。

我對jQuery有點新,但我想我錯過了一些簡單的東西。但是,我無法真正發現問題。請幫我在這裏。讓我知道是否必須在我的問題中包含更多細節。謝謝你這麼。

UPDATE 這裏是完整的代碼。爲了安全起見,我更改了變量名稱。我也刪除了一些部分並將其縮小,但是,主要依據/佈局仍然存在。

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width,initial-scale=1" charset ="UTF-8"> 
     <title>Handshake Protocol</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
     <script type="text/javascript"> 
      //reset type=date inputs to text 
      $(document).bind("mobileinit", function(){ 
       $.mobile.page.prototype.options.degradeInputs.date = true; 
      }); 
     </script> 
     <link rel="stylesheet" type="text/css" href="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jquery.ui.datepicker.mobile.css"></link> 
     <script src="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jQuery.ui.datepicker.js"></script> 
     <script src="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script> 
     <script type="text/javascript"> 
      var i=0; 
      var xmlFinal; 
      var accordianHtml=""; 
      var accordianHtmlStart='<div id="accordionDemo">'; 
      var accordianHtmlEnd="</div>"; 

      $(function(){ 
       $("#accordionDemo").accordion({ 
        header : "h3", 
        active: false, 
        alwaysOpen:false, 
        fillSpace:false, 
        collapsible:true 
       }); 
      }); 

      $(xmld).find('dummymain').each(function(){ //i am getting this xml file off the net, i have hidden the link for security reasons 

       accordianHtml += '<h3>'+dummyname+'</h3><div>'; 
       accordianHtml += "<button data-inline='true' data-mini='true' data-role='button'>Start</button>"; 
       accordianHtml += "<button data-inline='true' data-mini='true' data-role='button'>Stop</button>"; 
       accordianHtml += "</div>"; 
      }); 

      var accordianHtmlFinal = accordianHtmlStart + accordianHtml + accordianHtmlEnd; 
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="home"> 
      <script> 
       $('#home').append('<div data-role="header" id="header"> <h1>dummy Dashboard</h1> </div>'); 
       $('#home').append(accordianHtmlFinal); 
       $('#home').append('<input type="button" value="Save" onlick="send2dummyServer()"/>'); 
      </script> 
     </div> 
    </body> 
</html> 
+4

'collapsible:true,'<-----額外逗號 –

+1

如果$未定義,那麼這意味着jQuery庫在代碼執行時尚未加載。您是否嘗試在加載jQuery庫的'script'標籤之前(上方)運行JavaScript代碼? – David

+0

不,我有我的文件開始加載jQuery的腳本。我的腳本導入後,所有的javascript代碼都在一個單獨的腳本中。 –

回答

0

您需要在文檔就緒事件中執行您的jQuery代碼,否則您無法保證JQuery框架已正確加載。

$(document).ready(function() { 
    $('#home').append('<div id="accordionDemo"><b>Sample Code</b></div>'); 
}); 

See here瞭解更多信息。

+0

我在我的HTML 標記代碼。我試試這個,讓你知道! –

+0

仍然是空白頁:( –

+0

你也有一個引號的問題,因爲@Zhelyo Hristov提到。我用正確的語法編輯了我的答案... –

0

正如@BradM所指出的那樣,您在collapsible:true之後有額外的逗號。儘管在某些瀏覽器中這可能是可以容忍的,但它在語法上不正確,因此被IE拒絕。

由於您有語法錯誤,因此$未正確加載,因此嘗試訪問它是一個錯誤。

+0

是的,我修復了額外的逗號,但是像'$ is undefined'仍然出現 –

+0

這是* not *在語法上不正確,它是IE對標準解釋中的一個錯誤,我沒有鏈接,但可以查看它 –

2
$('#home').append('<div id="accordionDemo"><b>Sample Code</b></div>'); 

請注意引號。

+0

對不起,我原來的代碼有引用是正確的,當我在問題中寫出來時,我犯了一個錯誤,但我很感激,謝謝。 –