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

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

Mary-Kate Olsen

풀어 주다： 2024-11-11 22:19:02

원래의

352명이 탐색했습니다.

Why Should Your JavaScript Scripts Be Included in index.html in jQuery Mobile Projects?

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

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

jQuery Mobile의 페이지 처리 이해

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

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

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

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

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

로그인 후 복사

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

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

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

<head>
    <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
</head>

로그인 후 복사

index.html이 가장 중요한 이유

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

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

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