Front-end/Javascript JQuery

[Javascript] adjust iframe height iframe 높이 콘텐츠에 맞추기

here are two way to resize iframe height by its content's height automatically.

one is using iframe's onload event by javascript.

and another is making content to resize its parent's iframe height. maybe it should be on webpage's onload event and I used $('document').ready() of jquery.


okay. here's the code what u wanna get!!!!!! :) 


<iframe onload="this.style.height=this.contentDocument.body.scrollHeight + 'px';"></iframe> 


and another that let the child to do resize its parent.


//resize parent's iframe

                    parent.document.getElementsByName('f')[0].style.height=0 + 'px';

                    parent.document.getElementsByName('f')[0].style.height=document.body.scrollHeight + 'px';


getElementsByName('f')[0] is the iframe that contains it. You should change on your webpage using DOM syntex.


why did I set the height as 0 px before set its scrollHeight?


in my guess, when we use style object and its height attribute some condition are exist. maybe.

if the attribute has already its own value and new value is lower than it, new value cannot be applied. got it?


so I had just put the code that set the height as 0.



 

 


그냥 두가지방법이있음. 하나는 iframe의 onload 이벤트를 이용

하나는 iframe에서 불러오는 html에다가 js로 parent의 iframe에 dom으로 접근해서 해버리는거다

근데 후자의 경우엔 왜인지모르겠지만 이미잇는값보다 새값이 더 작을경우 새값을 적용시키지 않는다. 그래서 0으로 먼저 고정시켜놓고 한다. (0은 왜되는지모르겠다. 시간있는사람은 1로바꿔보시길. 그래서 0이라는 특별한 값만 크기값비교하지않고 넣는건지 아니면 그냥내가멍청이인것인지..)




,

알림

이 블로그는 구글에서 제공한 크롬에 최적화 되어있고, 네이버에서 제공한 나눔글꼴이 적용되어 있습니다.

카운터

Today :
Yesterday :
Total :

태그