프로그램

jquery 부모 프레임 특정 class 존재 유무 체크

다온다올과함께 2025. 2. 6. 07:00

 

 

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' 클래스가 존재하지 않습니다.");
  }
});

 

코드 설명

  1. $(window.parent.document)
    • 부모 프레임의 DOM에 접근합니다.
  2. .find("#parentElement")
    • 부모 프레임에서 id="parentElement"인 요소를 찾습니다.
  3. .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 #부모페이지특정클래스존재유무확

반응형