HTML5 iframe srcdoc 속성의 대안
HTML의 <iframe> 태그는 문서 안에 인라인 프레임을 만들어 다른 HTML 문서를 삽입할 때 사용됩니다. 이때 srcdoc 속성을 활용하면 iframe에 표시할 페이지의 HTML 콘텐츠를 직접 지정할 수 있습니다.
다만 구형 브라우저와의 호환성 문제 등으로 인해 srcdoc 속성을 사용할 수 없는 상황이 발생할 수 있습니다. 이런 경우에는 JavaScript를 이용해 동일한 결과를 얻는 것이 좋은 대안이 됩니다.
대안 방법: document.write() 활용하기
iframe 내부의 문서 객체인 contentWindow.document에 접근한 뒤, open(), write(), close() 메서드를 순서대로 호출하면 srcdoc 속성과 같은 효과를 낼 수 있습니다.
var doc = document.querySelector('#demo').contentWindow.document;
var content = '<html></html>';
doc.open('text/html', 'replace');
doc.write(content);
doc.close();코드 설명
contentWindow.document: iframe 내부의 문서(document) 객체에 접근합니다.open('text/html', 'replace'): 문서를 열며, 두 번째 인자 'replace'를 지정하면 브라우저 히스토리에 새 항목을 추가하는 대신 기존 항목을 대체합니다.write(content): 지정한 HTML 콘텐츠를 문서에 작성합니다.close(): 문서 쓰기를 마무리하고 콘텐츠 렌더링을 완료합니다.
이 방식은 srcdoc 속성을 지원하지 않는 구형 브라우저 환경에서도 iframe에 동적으로 HTML 콘텐츠를 삽입할 수 있게 해주므로, 폭넓은 브라우저 호환성이 필요한 프로젝트에서 유용하게 활용할 수 있습니다.