<iframe> 아이프레임 스크롤 기준으로 높이 자동 조절

관련없지만, 썸네일용으로 넣어봄.

<script language="javascript">
    function ifmHeight(){
    //iframe의 높이 가져옴
    var ifHeight=document.getElementById("ifm").contentWindow.document.body.scrollHeight+20;
    document.getElementById("ifm").height=ifHeight;
    }
</script>

scrollHeight에서 +20을 더해주었다. 단위차이랄까?
설명하려니 귀찮다. 넣으면 깔끔하다.

 

<iframe style="border:0px" width="100%" onLoad="ifmHeight();" height="100" scrolling="no" id="ifm" name="ifm" src="http://127.0.0.1:5500/Test_1.html"></iframe>

 

여기까지 찾아올 실력이라면,
자세한 설명은 필요없을것이라고 생각한다.

가끔 필요해서 정리해 보았다.

-끝-

 

---

너무 틱! 하고 간듯하여 다시 돌아왔다.

1. `<script language="javascript">` 태그

- 자바스크립트를 정의하는 부분입니다. `language="javascript"` 속성은 HTML4에서 사용되던 방식으로, 최신 표준에서는 생략 가능합니다.

2. `ifmHeight()` 함수

- `iframe`의 콘텐츠가 로드될 때, 그 내부 콘텐츠의 높이를 계산해서 `iframe`의 높이를 자동으로 조절하는 함수입니다.
- `getElementById("ifm")`는 id가 `ifm`인 `iframe` 요소를 찾습니다.
- `contentWindow.document.body.scrollHeight`는 `iframe` 내 문서(body)의 높이를 가져옵니다.
- 계산된 높이에서 20px을 더해, 여유 공간을 만들고 이를 `iframe`의 `height` 속성에 적용합니다.

3. `<iframe>` 태그

- 이 태그는 외부 HTML 파일을 현재 문서에 삽입하는 역할을 합니다.
- `style="border:0px"`: `iframe`의 테두리를 없앱니다.
- `width="100%"`: `iframe`의 너비를 화면의 100%로 설정합니다.
- `height="100"`: 초기 높이를 100px로 설정합니다. 이후 `onLoad` 이벤트로 `ifmHeight()` 함수가 실행되면 이 값이 조정됩니다.
- `scrolling="no"`: 스크롤 바가 나타나지 않도록 설정합니다.
- `onLoad="ifmHeight();`": `iframe`이 로드되면 `ifmHeight()` 함수가 호출되어 높이가 조정됩니다.

-정말 끝-