iframe 태그를 통해 웹페이지 안에 유트브 영상과 미디엄 페이지를 삽입해보았다.
HTML iframe
HTML iframe이란 inline frame의 약자로, 웹 페이지안에 또 다른 웹페이지를 삽입하는 것을 의미한다.
사용법
<h1>iframe을 이용하여 웹 페이지에 다른 웹 페이지 삽입하기</h1>
<iframe src="https://wikidocs.net/" title="내용" width="50%" height="300px"></iframe>src : 삽입하려는 웹페이지의 주소를 입력한다.
title : 웹 브라우저에게 해당 iframe이 어떤 iframe인지를 알린다.(권장사항)
width,height : iframe의 너비와 높이를 지정할 수 있다.
웹페이지 안에 src 에 넣어준 웹페이지가 삽입되었다.
1. 유트브 영상 삽입하기
유튜브 공유버튼 누르고 퍼가기를 누르면
코드를 복사할 수 있다
https://youtu.be/abcde 이렇게 생긴 공유용 주소가 아닌 https://www.youtube.com/embed/abcde 이렇게 embed를 꼭 붙여줘야 함!!
2. 미디엄 페이지 삽입하기
미디엄 페이지 역시 iframe 태그를 사용하면 바로 가져올 수 있을거라 생각했지만
미디엄이 거부했다
iframe으로 접근할 때는 동일 출처일 때만 가능하기 때문이었다
계속 해결을 못하고 있었는데ㅠㅠ 팀원분이 도와주셔서 빠르게 해결할 수 있었다!
const PROXY = 'https://cors-anywhere.herokuapp.com';
useEffect(() => {
const getPost = async () => {
const detailPage = page.content.filter((content) => content.id === id);
const res = await fetch(PROXY + '/' + detailPage[0].link);
const data = await res.text();
setEmbed(data);
};
getPost();
}, [page, id]);<Iframe
title="showcase"
srcDoc={embed}
frameBorder={0}
sandbox="allow-same-origin"
/>cors-anywhere 프록시 서버를 사용하여 응답을 받아와서 text 형태로 파싱해주어 미디엄 페이지의 HTML 코드를 가져올 수 있었다. 이 HTML 코드를 iframe 요소의 srcDoc 속성에 넣어주어 미디엄 페이지를 삽입할 수 있었다.
💡 Iframe 과 Dom
브라우저에서 HTML 을 전달받으면, DOM 을 Parsing 하고, Render Tree 를 만들게 되고, RenderLayer Tree 로 화면을 표현하게 된다.
이때, Iframe 을 만나게 되면 어떻게 될까?
DOM Parsing 중 iframe 을 만나도 DOM Parsing 을 중단 시키지 않는다. Node 에 Iframe 을 추가하고, 새로운 Render Layer 를 만들게 된다.
부모 문서의 load 가 완료되고, iframe 에서 요청한 문서가 Load 되면, DOM parsing 및 Rendering 이 시작된다.
Reference
https://wikidocs.net/86838
https://www.chromium.org/developers/design-documents/oop-iframes/oop-iframes-rendering/#TOC-Out-of-process-iframes
