iframe의 element를 제어하기

이슈

상황 가정. iframe으로 개발된 것을 합치는 상황
특정 조건에서 어떤 화면을 숨기거나 이벤트를 막는다고 가정

iframe의 element를 제어하기

방법1. 직접 접근 후 제어

• 같은 도메인에 있는 iframe이라면 직접 접근 후 제어가 가능하다

const iframe = document.querySelector<HTMLIFrameElement>('.iframeClassName');
const element = iframe?.contentWindow.document.querySelector('.elementClassName');
console.log(element)

• 참고
  • https://stackoverflow.com/questions/1088544/get-element-from-within-an-iframe

방법2. 부모에서 postMessage를 보내고 iframe에서 해당 메세지를 받아서 처리한다

• 도메인이 다른 경우 직접 접근은 불가능하다
• postMessage를 이용해서 iframe에 변경이 필요한 시점을 알려줄 수 있다

document.getElementById('cross_domain_page').contentWindow.postMessage(.......)

• 참고
  • https://stackoverflow.com/questions/61548354/how-to-postmessage-into-iframe