[HTML] - iframe을 JS로 제어하고 css를 맘껏 써보자!

이미 개발이 완료된 페이지를 모달로 불러와야하는 상황에서

iframe으로 불러온다면 어떨까?

 

라는 생각에 시작되었다.

 

구글링을 엄청해서 이렇게 해보라는 수많은 방식을 사용해봤는데 이게 하나도 안먹혔다...

그래도 구글링은 계속했고 여기에서 답을  찾았다

https://jsfiddle.net/zzznara/whL591q2/4/

[자바스크립트] javascript로 iframe에 동적으로 소스를 추가하거나 변경하는 방법 - JSFiddle - Code Playgr

 

여기에서 보여주는 예시처럼

    // iframe을 담는 변수

    let iframe = document.getElementById('iframe_id');

    // 브라우저 버전에 따라 iframe의 document를 가져온다.

    let iframedoc = iframe.document;

    if (iframe.contentDocument) {

        iframedoc = iframe.contentDocument;

    } else if (iframe.contentWindow) {

        iframedoc = iframe.contentWindow.document;

    }

    let mainPageHeader = iframedoc.querySelector('#mainPageHeader')

    mainPageHeader.style.display = "none";

    let header_area = iframedoc.querySelector('.header-area')

    // header_area.style.display = "none";

    let htmlTag = `

        <header class="">

            <h1 class="" style="padding-bottom:0;">모달이름</h1>

            <a class="modal-close">×</a>

        </header>`

    $(header_area).append(htmlTag);

 

이런식으로 해서 구현했다