반응형
Web Development · jQuery Mobile
jQuery Mobile —
data-ajax="false"로 외부 페이지 ID 직접 이동
jQM의 ajax 페이지 로드를 끄고 일반 새 로드로 전환
시작 오늘 분석할 코드
외부 HTML 파일의 특정 ID(page2-ex-link.html#page2)로 이동할 때 jQM의 자동 ajax 로딩이 문제를 일으킬 수 있다. data-ajax="false"로 그 자동을 끄는 것이 핵심.
<div data-role="page" id="page1"> <div data-role="header"><h1>첫번째 페이지</h1></div> <div data-role="content"> <a href="page2-ex-link.html#page2" data-ajax="false">페이지2</a> <a href="page3-ex-link.html">페이지3</a> </div> <div data-role="footer"><h4>꼬리말 영역</h4></div> </div>
용어 용어 정리
data-ajaxjQM의 ajax 페이지 로드 on/off
false전체 페이지 새로 로드 (일반 링크처럼)
true (기본)ajax로 페이지 부분만 갈아끼움
#page2URL 해시 — 같은 파일 내 페이지 ID 지정
외부 파일 + IDfile.html#id 형태 — 외부 다중 페이지 진입점
1 jQM의 ajax 로드 — 무엇이 문제?
jQM은 기본적으로 모든 링크 클릭을 ajax로 처리한다. 새 HTML 파일을 ajax로 가져와서 현재 DOM에 끼워 넣고, 페이지 전환 효과를 보여준다. 속도는 빠르지만 외부 파일의 <head> 안 스타일·스크립트가 적용 안 되는 부작용이 있다.
data-ajax="true" (기본): 클릭 → ajax fetch → 새 페이지 div만 추출 → 끼워넣기 → head의 스타일·스크립트는 무시됨 ✗ data-ajax="false": 클릭 → 일반 페이지 이동 → 새 HTML 통째로 로드 → head·body 모두 새로 → 정상 동작 ✓
2 언제 data-ajax="false"가 필요?
| 상황 | 왜? |
|---|---|
| 외부 파일 + #ID 진입 | ajax로 ID 검색이 정확하지 않을 수 있음 |
| 외부 파일이 별도 CSS·JS 사용 | ajax는 head를 가져오지 않음 |
| 새로고침/북마크가 중요한 페이지 | ajax는 URL 변경 방식이 다름 |
| jQM이 아닌 일반 페이지 링크 | ajax 처리 시도가 오류로 이어짐 |
3 페이지 이동 흐름
page1
→
data-ajax=false
→
page2-ex-link.html
→
#page2 영역 표시
4 rel="external"과의 차이
data-ajax="false"
속성 이름이 명확. 의도가 "ajax 끄기"라는 뜻.
rel="external"
표준 HTML 속성 활용. 같은 효과 (ajax 비활성화).
※ 두 속성의 결과는 거의 같다.
rel="external"은 표준 속성이라 SEO·접근성에 유리, data-ajax="false"는 jQM 전용 표시.반응형
5 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| 외부 #ID 링크에 ajax 끄기 안 함 | 해당 ID 못 찾고 빈 페이지 | data-ajax="false" 또는 rel="external" |
| 외부 파일이 CSS 안 입혀짐 | 스타일 깨짐 | ajax 끄거나 외부 CSS 공유 |
| 모든 링크에 false 적용 | jQM 전환 효과 사라짐 | 외부 파일 링크에만 |
핵심 한 줄 요약
data-ajax="false"jQM의 ajax 로딩 끄기 — 전체 페이지 새로 로드
언제?외부 파일 + #ID, 별도 CSS·JS 사용 페이지
vs rel="external"두 속성 결과 비슷 — rel은 표준 속성
해시 #ID파일 안의 특정 page 영역 진입점
Tags
#jQueryMobile #data-ajax #ajax-false #외부페이지 #multi-page #해시ID #rel-external #페이지전환 #jQM #모바일웹 #하이브리드앱 #jQuery #JavaScript #웹개발 #HTML #티스토리
▼ 티스토리 태그 입력란 복사용
jQueryMobile, data-ajax, ajax-false, 외부페이지, multi-page, 해시ID, rel-external, 페이지전환, jQM, 모바일웹, 하이브리드앱, jQuery, JavaScript, 웹개발, HTML, 티스토리
반응형
'php' 카테고리의 다른 글
| jQuery Mobile — listview + 외부 앱 링크 완전 정리 (0) | 2026.05.06 |
|---|---|
| jQuery Mobile — data-transition 페이지 전환 효과 완전 정리 (0) | 2026.05.05 |
| 연습 — table + col + thead/tbody + caption-side 완전 정리 (0) | 2026.05.05 |
| 테이블 — empty-cells 빈 셀 처리 완전 정리 (1) | 2026.05.05 |
| 연습 — 시맨틱 nav + section + article 레이아웃 완전 정리 (0) | 2026.05.05 |
댓글