외부 html을 jQuery Mobile 페이지에 통합

외부 html 소스를 jQuery 모바일 페이지에 동적으로 통합하려고합니다. 성공적으로 외부 HTML을 통합 할 수 있지만 일반 HTML (jQuery 모바일이 영향을받는 HTML이 아닌)처럼 보입니다. 어느 누구도 제가 잘못하고있는 것을 제안 할 수 있습니까?외부 html을 jQuery Mobile 페이지에 통합

홈페이지 HTML :

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" 
    /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://jqueryui.com/ui/jquery-1.7.1.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $("#main").load('externalHtml.html'); 
      //$("#main").append('externalHtml.html'); 
      //$("#main").load('externalHtml.html #contain'); 
      //$("#main").page(); 
     }); 
    </script> 
</head> 

<body> 
    <div data-role="content"> 
     <div id="main"></div>Main Page</div> 
</body>

externalHtml.html :

이

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
       <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src="http://jqueryui.com/ui/jquery-1.7.1.js"></script> 
     <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
</head> 
<body> 
external html 
<div data-role="content" id="contain"> 
<input type="search" name="name" id="name" value="" /> 
</div> 
     </body> 
     </html>

출처

2012-08-02 Ben Pearce

는 컨테이너 요소에 .trigger('create')는, jQuery를 모바일 자동으로 내 모든 위젯을 초기화됩니다 컨테이너. 그들은 정말이 더 나은 문서화해야합니다,하지만 당신은 위젯의 각 유형에 대한 API 이벤트를 보면, 당신은 create 이벤트에 관한 문서를 볼 수

$("#main").load('externalHtml.html').trigger('create');

예를 들면 다음과 같습니다. 당신은 document.ready를 사용해서는 안 대신 의사 페이지의 pageinit 이벤트에 바인딩해야 http://jquerymobile.com/demos/1.1.1/docs/api/events.html

또한, 문서의 페이지 상단을 참조하십시오. document.ready을 사용하면 미래에 두통이 생길 수 있습니다.

- UPDATE -

당신은 아마 외부 HTML은 당신이 그것을 초기화하기 전에로드 있도록 콜백 .trigger('create')를 호출 할 것이다

$("#main").load('externalHtml.html', function() { 
    $(this).trigger('create'); 
});

출처

2012-08-02 21:54:52 Jasper

큰 일했다, 감사합니다! –

좋은! 하지만 어떻게 URL을 해시를 업데이 트합니까? – Magico

@Magico'window.location.hash = 'some-hash'; '를 사용하여 URL을 업데이트하거나 최신 브라우저에서 pushState API를 사용하여 해쉬를 넘어서 URL을 업데이트 할 수 있습니다. – Jasper

외부 html을 jQuery Mobile 페이지에 통합

답변

관련 문제