HTML DOM Window frames 속성 – 현재 창의 모든 프레임 객체 다루기

HTML DOM의 Window frames 속성은 현재 창(window) 안에 존재하는 모든 프레임을 나타내는 객체를 반환합니다. 이 속성을 활용하면 페이지에 삽입된 <iframe> 요소들을 자바스크립트로 탐색하고, 각 프레임의 위치(location)나 문서에 접근하여 제어할 수 있습니다.

문법

현재 창의 프레임 목록을 가져오는 기본 문법은 다음과 같습니다.

window.frames

반환된 객체는 배열과 유사하게 동작합니다. 따라서 window.frames.length로 프레임의 개수를 확인하고, window.frames[i] 형태로 인덱스를 이용해 각 프레임의 window 객체에 접근할 수 있습니다.

예제

아래 예제는 두 개의 iframe을 포함한 페이지에서 Window frames 속성을 사용해 모든 프레임의 URL을 한 번에 변경하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window frames</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-frames</legend>
            <label>사용자 1:</label><iframe src="https://www.example.com"></iframe><br>
            <label>사용자 2:</label><iframe src="https://www.example.com"></iframe><br>
            <input type="button" value="프레임 이동" onclick="goToURL()">
            <div id="divDisplay">
            </div>
        </fieldset>
    </form>
    <script>
        var divDisplay = document.getElementById("divDisplay");
        function goToURL() {
            for (var i = window.frames.length - 1; i >= 0; i--) {
                window.frames[i].location = "https://www.tutorialspoint.com/html5/foo.mp4";
            }
            divDisplay.textContent = '모든 프레임이 새 URL로 이동했습니다';
        }
    </script>
</body>
</html>

출력 결과

'프레임 이동' 버튼을 클릭하기 전 −

HTML DOM Window frames 속성 – 현재 창의 모든 프레임 객체 다루기

'프레임 이동' 버튼을 클릭한 후 −

HTML DOM Window frames 속성 – 현재 창의 모든 프레임 객체 다루기

버튼을 클릭하면 goToURL() 함수가 실행되어, 반복문을 통해 현재 창의 모든 프레임이 지정된 새 URL로 이동하고 결과 메시지가 화면에 표시됩니다.

참고 사항

window.frames는 사실상 window 객체 자신을 반환하며, 프레임은 인덱스뿐 아니라 name 속성으로도 접근할 수 있습니다(예: window.frames["myFrame"]).
HTML5에서는 <frame> 및 <frameset> 태그가 폐기(deprecated)되었으므로, 프레임 구현 시 <iframe> 사용이 권장됩니다.
동일 출처 정책(Same-Origin Policy)에 따라 서로 다른 도메인의 프레임 내부 문서에는 직접 접근이 제한될 수 있습니다.