iframe에 빈(비어 있는) src를 설정해야 할 때는 단순히 속성을 비워 두는 것보다 about:blank 값을 사용하는 것이 좋습니다. 아래와 같이 <iframe> 요소의 src 속성에 지정하면 됩니다.
<iframe src='about:blank'></iframe>
왜 about:blank를 사용해야 할까요?
src 속성을 완전히 비워 두거나 생략하면 브라우저나 상황에 따라 예기치 않은 동작이 발생할 수 있습니다. 반면 about:blank는 명시적으로 '빈 문서'를 로드하도록 브라우저에 지시하는 표준적인 방식이므로, 초기화가 필요한 iframe이나 동적으로 콘텐츠를 채울 예정인 iframe에 안전하게 사용할 수 있습니다.
예제 코드
다음은 전체 HTML 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<iframe src='about:blank'></iframe>
<script>
</script>
</body>
</html>
실행 방법
위 프로그램을 실행하려면 파일 이름을 "anyName.html(index.html)"로 저장한 뒤, 해당 파일을 마우스 오른쪽 버튼으로 클릭합니다. 이어서 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 확인할 수 있습니다.
출력 결과
위 코드를 실행하면 다음과 같이 빈 iframe이 화면에 표시됩니다.
