1
jquery 모바일을 사용하여 페이지를 바꿀 때 아약스를 사용하면 본문의 DOM 만 그래 픽합니다 (data-role="page"). 문제는 이것이 휴대 기기에서 실행되는 phonegap 앱이므로 ajax없이 전체 페이지로드를 수행하는 것이 JS, CSS 스크립트를 모두 가져 오는 속도가 매우 느립니다.jquery 모바일 아약스로드에 자바 스크립트를 잡을 수있는 방법이 있나요
저는 여러 가지 시도를 해왔습니다. 워드 프로세서에 DOM을 추가하고 data-role="page" 요소 아래에 넣을 수는 있지만이 방법으로는 실행할 수 없습니다.
는 내가 현재에 시도하고 첫 페이지의 상단에 포함 pagechange에가
function insertScript(script, container) {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'Assets/Scripts/' + script + '.js';
container.appendChild(elem);
}
$(document).bind('pagechange', function(event){
//get the path to the html asset
var path = document.location.pathname;
//split up
var arr = path.split('/');
//get the relevant part of the path ie index.html
var page = arr[arr.length-1];
// grab a list of all the divs's found in the page that have the attribute "role" with a value of "page"
var pages = $('div[data-role="page"]'),
// the current page is always the last div in the Array, so we store it in a variable
currentPage = pages[pages.length-1];
//if the page is index add index.js to the last dom node
if (page == 'index.html') {
insertScript('index', currentPage);
}
});
그런 다음 DOM에 해당 페이지에 고유 한 JS를 삽입하려고하는 부트 스트랩 스크립트가 있습니다 예를 들어 index.js는 다음과 같습니다.
$("#start_page").live('pageinit', function() {
alert('on start page');
});
그러나 pageinit 기능은 실행되지 않습니다. 어떤 아이디어
** 편집 :
내가 예를 들어 index.html을하고 home.html을를 사용하여, 여러 HTML 페이지를
* index.html을
<html>
<head>
<script type="text/javascript" src="js/phonegap-1.3.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$("#index_page").live('pageinit', function() {
//do some page specific js functions for index.html
});
</head>
<body>
<div data-role="page" id="index_page">
<a href='home.html'>go to home page</a>
</div>
</body>
</html>
** home.html을
<html>
<head>
<script type="text/javascript">
$("#home_page").live('pageinit', function() {
//this is the JS I want to pull
});
</head>
<body>
<div data-role="page" id="home_page">
<h1>this is the home page</h1>
</div>
</body>
</html>
그래서 색인에서 집으로 연결되는 링크를 클릭하면 DOM이 업데이트되지만 JS n home.html 페이지는 AJAX를 통해 페이지에 삽입되지 않으므로 그렇게 할 방법을 찾으려고합니다.
한 페이지에 모든 js를 포함 할 수 있지만 페이지를 많이 가지고 있기 때문에 그것을 피하려고 정말 노력하고 있습니다. 지저분 해지기 쉽습니다.
내가 묻는 것보다 나은 레이아웃에 대한 질문에 정보를 추가했습니다. 기본적으로 아약스를 탐색 할 때 특정 자바 스크립트를 가져 오려고합니다. – Brian