HTML DOM Window frameElement 속성 – 현재 창이 포함된 요소 확인하기

HTML DOM의 Window frameElement 속성은 현재 창(window)이 다른 요소 안에 삽입되어 있을 경우, 그 창을 감싸고 있는 HTML 요소를 반환합니다. 여기서 해당 요소는 <embed>, <iframe>, 또는 <object>와 같은 임베드(삽입) 요소가 될 수 있습니다.

만약 현재 창이 어떤 요소에도 포함되어 있지 않다면, 이 속성은 null을 반환합니다. 따라서 페이지가 iframe 내부에서 실행 중인지 여부를 판별하는 데 유용하게 활용할 수 있습니다.

문법(Syntax)

frameElement 속성의 기본 사용 문법은 다음과 같습니다.

window.frameElement

별도의 매개변수 없이 호출하며, 창을 감싸고 있는 요소 객체를 반환하거나, 포함 관계가 없으면 null을 반환합니다.

예제(Example)

아래 예제는 HTML DOM Window frameElement 속성을 활용하여, 현재 창이 임베드 상태인지 확인하고 URL 입력값에 따라 임베드 요소의 소스(src)를 변경하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window frameElement</title>
<style>
    * {
       padding: 2px;
       margin:5px;
    }
    form {
       width:70%;
       margin: 0 auto;
       text-align: center;
    }
    input[type="button"] {
       border-radius: 10px;
</style>
</head>
<body>
    <form>
       <fieldset>
          <legend>HTML-DOM-Window-frameElement</legend>
          <input id="urlSelect" type="url" placeholder="Type URL here...">
          <input type="button" value="Go To" onclick="goToURL()">
          <div id="divDisplay"></div>
       </fieldset>
    </form>
    <script>
    var urlSelect = document.getElementById("urlSelect");
    var divDisplay = document.getElementById("divDisplay");
    function goToURL() {
       if(window.frameElement){
          window.frameElement.src=urlSelect.value;
          divDisplay.textContent = 'Current Window is embedded';
       }
       else
          divDisplay.textContent = 'Current Window is not embedded';
       }
    </script>
</body>
</html>

출력 결과(Output)

URL 입력란에 주소를 입력한 뒤 'Go To' 버튼을 클릭하면 다음과 같은 결과를 확인할 수 있습니다.

HTML DOM Window frameElement 속성 – 현재 창이 포함된 요소 확인하기

버튼 클릭 후 임베드 요소의 소스(src)가 입력한 URL로 변경됩니다.

HTML DOM Window frameElement 속성 – 현재 창이 포함된 요소 확인하기

정리

window.frameElement 속성은 현재 창이 <iframe>, <embed>, <object> 등에 포함되어 있는지 여부를 손쉽게 판단할 수 있는 방법을 제공합니다. 임베드된 경우 해당 부모 요소 객체에 접근하여 src 값을 변경하는 등의 동적 제어도 가능하므로, iframe 기반 위젯이나 임베드 콘텐츠를 다룰 때 매우 실용적인 속성입니다.