jQuery 모바일 프로젝트의 index.html에 JavaScript 스크립트를 포함해야 하는 이유는 무엇입니까?

JQuery Mobile의 index.html에 스크립트가 있어야 하는 이유

jQuery Mobile 프로젝트에서 $.mobile.changepage를 사용하여 페이지 간에 리디렉션할 때 혼란이 발생할 수 있습니다. . 예기치 않게 리디렉션된 페이지의 스크립트가 실행되지 않아 아무것도 알 수 없습니다.

jQuery Mobile의 페이지 처리 이해

이 상황을 이해하려면 jQuery Mobile의 페이지 처리 메커니즘을 이해하는 것이 중요합니다. AJAX를 활용하여 후속 페이지를 로드합니다. 첫 번째 페이지는 일반적으로 로드되지만 후속 페이지는 BODY 콘텐츠(구체적으로 data-role="page" 속성이 있는 첫 번째 DIV)만 수신하고 HEAD 콘텐츠는 무시됩니다.

이는 스크립트가 리디렉션된 페이지의 BODY 콘텐츠에 정의된 내용은 실행되지 않습니다. 그 이유는 필요한 라이브러리가 포함된 상위 HEAD가 페이지 전환 중에 로드되지 않기 때문입니다.

해결책 1: 본문에 스크립트 포함

이 문제를 해결하려면 SCRIPT 태그를 이동하세요. 리디렉션된 페이지의 BODY 콘텐츠:

    <div data-role="page">
        // Other HTML content
        <script>
            // Javascript code
        </script>
    </div>

이 솔루션이 작동하더라도 잠재적으로 HTML이 여러 개로 복잡해질 수 있습니다. SCRIPT 태그.

해결책 2: index.html에서 스크립트 통합

더 나은 접근 방식은 index.html의 모든 JavaScript 로직을 HEAD의 별도 JS 파일에 포함시켜 중앙 집중화하는 것입니다.

    <meta name="viewport" ...>
    <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css">
    <script src="jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Custom JS file

index.html이 가장 중요한 이유

솔루션 2가 통합되는 동안 스크립트를 index.html에 포함시키는 것이 여전히 중요합니다. 이는 주로 Phonegap의 버그 특성 때문입니다. 오류가 발생하는 경우 Phonegap은 현재 페이지를 새로 고쳐 DOM을 잃을 수 있습니다. 새로 고친 페이지의 HEAD에 없는 JavaScript 코드는 실행되지 않습니다.

index.html의 스크립트를 중앙 집중화함으로써 필요한 라이브러리가 항상 HEAD에 로드되어 잠재적인 Phonegap 오류 후에도 중단 없는 기능을 보장합니다. .

위 내용은 jQuery 모바일 프로젝트의 index.html에 JavaScript 스크립트를 포함해야 하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!