iframe awstats 삽입

관리자 모드 등 웹페이지에 iframe으로 awstats 삽입하기.
iframe 높이를 awstats 화면의 높이와 같게 하여 iframe 스크롤 감추기.
마우스 커서가 iframe 위에서 작동하지 않는 것을 임시레이어 생성으로 해결.

 

 

1. awstats 를 넣을 공간에 iframe 삽입

 

<iframe src="/awstats/awstats.pl?config=oops4u.com" width="100%" frameborder="0"></iframe>

 

 

2. 이중 스크롤을 없애기 위해 awstats 뷰페이지의 높이를 iframe 높이로 지정

(awstats 뷰페이지 역시 iframe을 사용하므로 구체적으로는 awstats 뷰페이지의 오른쪽 프레임 높이...)

 

<iframe src="/awstats/awstats.pl?config=oops4u.com" name="ifr_awstats" width="100%" frameborder="0" scrolling='no' onload="ifr_resize(this)"></iframe>

<script type="text/javascript">
function ifr_resize(e) {
    e.height = eval( e.name + ".frames['mainright'].document.body.scrollHeight" );
    //e.height = document.ifr_awstats.frames['mainright'].document.body.scrollHeight;
}
</script>

이렇게 하면 iframe이 로드되면서 iframe의 세로길이는 awstats의 세로길이와 같게 되므로 스크롤이 생기지 않음.
하지만 마우스 커서가 iframe인 파란 영역 위에 있을 때 바깥쪽 세로 스크롤이 작동하지 않음.

 

 

 

 

3. 임의의 레이어를 만들어 iframe 위에 겹치게 배치

<div id="scroll_container" style="width:95%; position:absolute;"></div>

 

<iframe src="/awstats/awstats.pl?config=oops4u.com" name="ifr_awstats" width="100%" frameborder='0' scrolling='no' onload="ifr_resize(this)"></iframe>

 

<script type="text/javascript">
function ifr_resize( e ) {
    e.height = eval( e.name + ".frames['mainright'].document.body.scrollHeight" );
    document.getElementById('scroll_container').style.height = e.height + 'px';
}
</script>

 

임의의 div 영역(빨강)을 만들어 iframe 영역(파랑)을 덮어씌우면,
마우스가 iframe 위에 있어도 div 위에 있는 것으로 인식하고 바깥쪽 세로 스크롤이 작동됨.