我今天在這裏談到了跨瀏覽器問題。我的代碼完美呈現在Chrome和Firefox上,但它在IE上呈現空白頁面。網頁在IE中呈現空白
每當我在IE中調試時,在jQuery代碼片段中觸發的錯誤是「$ is undefined」或「Object Expected」。
設置:
<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>
'collapsible:true,'<-----額外逗號 –
如果$未定義,那麼這意味着jQuery庫在代碼執行時尚未加載。您是否嘗試在加載jQuery庫的'script'標籤之前(上方)運行JavaScript代碼? – David
不,我有我的文件開始加載jQuery的腳本。我的腳本導入後,所有的javascript代碼都在一個單獨的腳本中。 –