jQuery 모바일 페이지 스크립트가 `index.html`에 포함되어야 하는 이유는 무엇입니까?-JS 튜토리얼-php.cn

jQuery 모바일 페이지 스크립트가 `index.html`에 포함되어야 하는 이유는 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-11 02:24:02

원래의

520명이 탐색했습니다.

Why Do jQuery Mobile Page Scripts Need to Be Included in `index.html`?

jQuery Mobile을 사용할 때 Index.html에 스크립트를 포함해야 하는 이유

소개

jQuery Mobile 프로젝트에서 $.mobile.changepage()를 사용하여 페이지를 리디렉션하면 혼란이 발생합니다. 개발자는 동일한 파일인 index.html에 모든 페이지 스크립트를 포함해야 합니다. 그렇지 않으면 리디렉션 페이지가 헤더에 정의된 기능을 실행하지 못합니다. 이 문서에서는 이러한 현상의 이면에 있는 동작에 대해 설명합니다.

jQuery Mobile이 페이지 변경을 처리하는 방법

jQuery Mobile은 Ajax를 사용하여 후속 페이지를 로드합니다. 첫 번째 페이지는 정상적으로 로드되지만 이후 페이지는 본문 내용만 로드됩니다. 특히 data-role="page" 속성이 있는 첫 번째 div만 DOM에 통합되고 다른 것은 모두 삭제됩니다.

스크립트가 작동하지 않는 이유

두 번째 페이지 이후에는 HTML이 정상적으로 렌더링되므로 버튼이 표시됩니다. 그러나 페이지 전환 중에 상위 헤드가 무시되었기 때문에 클릭 이벤트가 작동하지 않습니다.

해결책 1: 스크립트를 본문 콘텐츠로 이동

빠른 해결 방법은 이동하는 것입니다. 다음 페이지의 본문 콘텐츠에 스크립트 태그를 추가합니다.

<body>
    <div data-role="page">
        // HTML content
        <script>
            // JavaScript
        </script>
    </div>
</body>

로그인 후 복사

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

선호되는 솔루션은 모든 JavaScript를 단일 파일인 index.js로 이동하여 첫 번째 HTML 파일의 헤드에 배치하는 것입니다.

<head>
    <meta ...>
    <link rel="stylesheet" ...>
    <script src="jquery.mobile-1.2.0.min.js"></script>
    <script src="index.js"></script> // Your consolidated JavaScript
</head>

로그인 후 복사

Index.html 통합 이유

Phonegap은 jQuery Mobile과 마찬가지로 버그를 전시합니다. 모든 JavaScript가 단일 HTML 파일에 배치되면 오류가 발생하고 현재 페이지를 새로 고칠 수 있습니다. 해당 페이지에 필수 JavaScript가 없으면 다시 시작할 때까지 더 이상 작동하지 않습니다.

현실적인 솔루션

index.js 파일을 다른 모든 HTML 파일의 헤드로 이동하세요. . 이렇게 하면 버그로 인해 다른 DOM 요소가 손실된 경우에도 스크립트에 액세스할 수 있습니다.

결론

jQuery Mobile이 페이지 변경을 처리하는 방법을 이해하는 것은 성공적인 앱 개발에 매우 중요합니다. index.html에 스크립트를 통합하는 것은 스크립트 가용성을 보장하고 Phonegap의 잠재적인 문제를 방지하기 위한 권장 솔루션입니다.

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