jQuery를 사용하여 자식 페이지(iframe 내부)에서 부모 프레임(iframe을 포함한 페이지)의 특정 클래스 존재 여부를 확인하려면 다음 단계를 따릅니다. 동일 출처 정책(Same-Origin Policy)을 준수해야 하며 자식과 부모가 동일한 도메인, 프로토콜, 포트에 있어야 가능합니다.
1. 기본 코드 (부모 프레임의 클래스 확인)
아래는 부모 페이지의 특정 요소에 특정 클래스가 있는지 확인하는 코드입니다.
$(document).ready(function () {
// 부모 페이지에서 특정 요소를 선택
var parentHasClass = $(window.parent.document).find("#parentElement").hasClass("targetClass");
if (parentHasClass) {
console.log("부모 프레임의 #parentElement에 'targetClass' 클래스가 존재합니다.");
} else {
console.log("부모 프레임의 #parentElement에 'targetClass' 클래스가 존재하지 않습니다.");
}
});
코드 설명
- $(window.parent.document)
- 부모 프레임의 DOM에 접근합니다.
- .find("#parentElement")
- 부모 프레임에서 id="parentElement"인 요소를 찾습니다.
- .hasClass("targetClass")
- 해당 요소에 targetClass가 존재하는지 확인합니다.
2. 다양한 상황별 코드
부모 페이지의 body에 클래스 확인
$(document).ready(function () {
if ($(window.parent.document.body).hasClass("targetClass")) {
console.log("부모 프레임의 <body>에 'targetClass'가 존재합니다.");
} else {
console.log("부모 프레임의 <body>에 'targetClass'가 없습니다.");
}
});
부모 페이지의 여러 요소 중 하나에 클래스 확인
$(document).ready(function () {
var parentHasClass = $(window.parent.document).find(".someClass").length > 0;
if (parentHasClass) {
console.log("부모 프레임에 'someClass' 클래스가 있는 요소가 하나 이상 존재합니다.");
} else {
console.log("부모 프레임에 'someClass' 클래스가 없습니다.");
}
});
3. 다른 출처일 때(PostMessage API 사용)
부모와 자식이 다른 출처일 경우 직접 접근할 수 없으므로 PostMessage API를 사용해야 합니다.
부모 페이지 코드
// 자식 페이지에서 요청 수신
window.addEventListener("message", function (event) {
if (event.origin !== "자식 페이지의 도메인") return; // 안전성 확인
if (event.data === "checkClass") {
// 클래스 존재 여부 확인
var hasClass = document.querySelector("#parentElement").classList.contains("targetClass");
event.source.postMessage({ hasClass: hasClass }, event.origin);
}
});
자식 페이지 코드
// 부모에게 클래스 존재 여부 요청
window.parent.postMessage("checkClass", "부모 페이지의 도메인");
// 부모로부터 응답 수신
window.addEventListener("message", function (event) {
if (event.origin !== "부모 페이지의 도메인") return; // 안전성 확인
if (event.data.hasClass) {
console.log("부모 프레임에 'targetClass'가 존재합니다.");
} else {
console.log("부모 프레임에 'targetClass'가 존재하지 않습니다.");
}
});
요약
- 동일 출처: $(window.parent.document)로 부모 DOM에 접근해 클래스 존재 여부를 확인합니다.
- 다른 출처: PostMessage API를 사용해 부모와 자식 간 안전하게 데이터를 주고받습니다.
#jquery #부모페이지특정클래스존재유무확
반응형
'프로그램' 카테고리의 다른 글
| jquery 특정 영역 외부 클릭 시 이벤트 발생 (0) | 2025.02.08 |
|---|---|
| jquery 자식 페이지에서 부모 프레임 높이 알기 (0) | 2025.02.04 |
| jquery 부모 프레임 높이 제어 (0) | 2025.02.02 |
| React fetch 기능 (0) | 2025.01.19 |
| React useEffect 기능 (0) | 2025.01.17 |
댓글