HTML5 iframe srcdoc 속성의 대안 방법

HTML의 <iframe> 태그는 웹 페이지 안에 인라인 프레임(inline frame)을 만들어 다른 문서나 콘텐츠를 삽입할 때 사용됩니다.

iframe 기본 사용 예제

아래 예제는 src 속성을 이용해 외부 페이지를 불러오는 가장 기본적인 형태입니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML iframe Tag</title>
   </head>
   <body>
      <iframe src = "https://www.tutorialspoint.com/index.htm" width = "100%"></iframe>
   </body>
</html>

srcdoc 속성이란?

srcdoc 속성은 iframe 내부에 표시할 HTML 콘텐츠를 직접 지정할 수 있게 해줍니다. 즉, 별도의 외부 URL 없이 문자열 형태의 HTML 코드를 바로 렌더링할 수 있습니다.

srcdoc의 대안: JavaScript 활용

브라우저 호환성 등의 이유로 srcdoc 속성을 사용할 수 없다면, JavaScript의 document.write() 메서드를 활용해 동일한 결과를 얻을 수 있습니다.

먼저 contentWindow.document를 통해 iframe 내부 문서에 접근한 뒤, 원하는 HTML 콘텐츠를 작성하면 됩니다.

var doc = document.querySelector('#demo').contentWindow.document;
var content = '<html></html>';

doc.open('text/html', 'replace');
doc.write(content);
doc.close();

코드 설명

querySelector('#demo'): id가 'demo'인 iframe 요소를 선택합니다.
contentWindow.document: 해당 iframe의 내부 문서 객체에 접근합니다.
doc.open('text/html', 'replace'): 새 문서 스트림을 열고, 히스토리에 남지 않도록 replace 옵션을 지정합니다.
doc.write(content): 준비된 HTML 콘텐츠를 iframe 안에 작성합니다.
doc.close(): 문서 스트림을 닫아 렌더링을 완료합니다.

이 방식은 구형 브라우저에서도 잘 동작하며, 동적으로 iframe 콘텐츠를 생성해야 하는 상황에서 유용하게 활용할 수 있습니다.