IE에서 웹 페이지가 공백으로 렌더링됩니다.

저는 브라우저 간 문제에 관해 오늘 왔습니다. 내 코드는 Chrome과 Firefox에서 완벽하게 렌더링되지만 IE에서는 빈 페이지가 렌더링됩니다.IE에서 웹 페이지가 공백으로 렌더링됩니다.

IE에서 디버깅 할 때마다 "$ is undefined"또는 "Object Expected"중 하나 인 jQuery 코드 단편에 오류가 발생합니다.

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에 대해 처음 접했지만 뭔가 간단하다고 생각합니다. 그러나, 나는 정말로 문제를 발견 할 수 없다. 제발 도와주세요. 내 질문에 더 자세한 내용을 포함해야하는지 알려주세요. 매우 고맙습니다.

업데이트 여기에 전체 코드가 나와 있습니다. 보안을 위해 변수 이름을 변경했습니다. 또한 일부 부품을 삭제하고 압축했지만 주요 요지/레이아웃이 그대로 남아 있습니다.

<!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>

출처

2013-06-18 chaitanya.varanasi

'collapsible : true,'<----- extra comma –

'$ is undefined'라면, 그 코드가 실행될 때 jQuery 라이브러리가로드되지 않았 음을 의미합니다. jQuery 라이브러리를로드하는'script' 태그 (위) 앞에서 JavaScript 코드를 실행하려고합니까? – David

아니요, 파일 시작 부분에 jquery를로드하는 스크립트가 있습니다. 내 모든 자바 스크립트 코드는 스크립트를 가져온 후에 별도의 스크립트에 있습니다. –

문서 준비 이벤트에서 jquery 코드를 실행해야합니다. 그렇지 않으면 JQuery 프레임 워크가 제대로로드되었는지 보증 할 수 없습니다.

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

See here 자세한 내용은

출처

2013-06-18 14:46:46

해당 코드는 내 태그에 있습니다. 아프다 이것을 시도하고 알게하십시오! –

여전히 빈 페이지 : ( –

@ Zhelyo Hristov가 언급 한 바와 같이 따옴표에 문제가 있습니다. 따옴표의 올바른 구문을 사용하여 내 대답을 편집했습니다 ... –

@BradM이 지적한대로 collapsible:true 뒤에 쉼표가 추가됩니다. 이것은 일부 브라우저에서 허용 될 수 있지만 구문 상 올바르지 않으므로 IE에서 거부됩니다.

구문 오류가 발생하여 $이 제대로로드되지 않았으므로 액세스하려고 시도하는 중에 오류가 발생합니다.

출처

2013-06-18 14:49:55

그래도 같은 쉼표가 수정되었지만 여분의 쉼표가 수정되었습니다. '$ is undefined'가 여전히 나타납니다. –

이것은 구문 상 올바르지 않습니다 * IE의 표준 해석 버그입니다. 링크가 없지만 찾아 볼 수 있습니다. –

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

따옴표에 유의하십시오.

출처

2013-06-18 14:50:38

원본 코드에 질문에 답을 쓸 때 실수를했습니다. 감사합니다. 감사합니다. –

IE에서 웹 페이지가 공백으로 렌더링됩니다.

답변

관련 문제