Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML window.length 속성 – 현재 문서의 iframe 개수 확인하기

HTML의 window.length 속성은 현재 HTML 문서에 포함된 <iframe> 요소의 개수를 반환합니다. 웹페이지 안에 몇 개의 iframe이 삽입되어 있는지 자바스크립트로 간단하게 확인할 수 있어, 동적 페이지 분석이나 요소 카운트 작업에 유용하게 활용됩니다.

문법(Syntax)

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

window.length

별도의 매개변수 없이 호출하며, 반환값은 해당 문서 내 iframe 요소의 총 개수를 나타내는 숫자입니다.

예제(Example)

아래는 HTML Window length 속성을 실제로 활용한 예제 코드입니다. 버튼을 클릭하면 현재 문서에 포함된 iframe의 개수가 화면에 표시됩니다.

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
</style>
<body>
<h1>HTML Window length Property</h1>
<iframe src="https://tutorialspoint.com/"></iframe>
<button onclick="display()" class="btn">Show the number of iframe</button>
<div class="show"></div>
<script>
   function display() {
      document.querySelector('.show').innerHTML = 'Number of iframe is: ' + window.length;
   }
</script>
</body>
</html>

코드 설명

  • 문서 본문에는 하나의 <iframe> 요소가 포함되어 있습니다.
  • 버튼을 클릭하면 display() 함수가 실행되고, 이 함수 내부에서 window.length 값을 읽어옵니다.
  • 조회된 iframe 개수는 .show 클래스를 가진 div 영역에 텍스트로 출력됩니다.

실행 결과(Output)

위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.

HTML window.length 속성 – 현재 문서의 iframe 개수 확인하기

이제 “Show the number of iframe” 버튼을 클릭해 보세요. 현재 HTML 문서에 포함된 iframe의 개수가 아래와 같이 화면에 표시됩니다.

HTML window.length 속성 – 현재 문서의 iframe 개수 확인하기

정리

window.length 속성은 별도의 라이브러리나 복잡한 DOM 탐색 없이도 현재 문서의 iframe 개수를 즉시 파악할 수 있는 간편한 방법입니다. 참고로 이 값은 window.frames.length와 동일하며, 프레임 기반 콘텐츠를 다루는 스크립트 작성 시 유용하게 사용할 수 있습니다.