타 도메인간에 iframe resize 가 몇년전까지는 어설프나마 잘 됐었는데

요즘은 브라우져도 많아지고 explorer 버젼도 많아져서 먹통이 되어버려서 업체에서 문의가 왔다

골치 아프겠단 생각을 가지고 열심히 검색을 했는데 좋은놈 발견!!

같은 도메인은 물론이고 타 도메인도 매우 잘됌ㅎㅎ

테스트는 explorer 10/11하고 크롬해서 해봤는데 OK

(sample : http://www.goodkiss.co.kr/sample/frameResize/index.html)

 

* 부모창(index.html)

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
 
<h2>Automagically resizing iFrame</h2>
<p>Resize window or click 'Toggle content' to watch iFrame resize</p>
<div style="margin:20px;">
<iframe src="frame.content.html" width="100%" scrolling="no"></iframe>
</div>
<p id="callback">
</p>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.iframeResizer.min.js"></script>
<script type="text/javascript">
$('iframe').iFrameSizer({
     log                    : true,  // For development
     autoResize             : true,  // Trigering resize on events in iFrame
     contentWindowBodyMargin: 8,     // Set the default browser body margin style (in px)
     doHeight               : true,  // Calculates dynamic height
     doWidth                : false, // Calculates dynamic width
     enablePublicMethods    : true,  // Enable methods within iframe hosted page
     interval               : 0,     // interval in ms to recalculate body height, 0 to disable refreshing
     scrolling              : false, // Enable the scrollbars in the iFrame
     callback               : function(messageData){ // Callback fn when message is received
          $('p#callback').html(
               '<b>Frame ID:</b> '    + messageData.iframe.id +
               ' <b>Height:</b> '     + messageData.height +
               ' <b>Width:</b> '      + messageData.width +
               ' <b>Event type:</b> ' + messageData.type
          );
     }
});
</script>
</body>
</html>

와 같이 코딩해 주면 되고

 

* 자식창(frame.content.html)

?
1
2
3
4
5
페이지에서 jQuery를 안쓴다면 아래와 같이 선언해주고
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 
페이지 하단에 아래의 코딩을 해주면 된다.
<script type="text/javascript" src="../js/iframeResizer.contentWindow.min.js"></script>


 주의할 점은 자식페이지에 css가 지저분하거나 복잡하면 resizing

가 잘 안되는 경우가 발생할 수 있으니

잘 되지 않을 경우에는 css를 체크해보길 바람!!

 

출처 : http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

첨부파일 : 

jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.zip

저작자표시

'웹개발' 카테고리의 다른 글

HTML 틀 고정  (0) 2016.02.05

링크 : 

http://jarstyle.tistory.com/entry/HTML-%ED%8B%80%EA%B3%A0%EC%A0%95-%ED%81%AC%EB%A1%9C%EC%8A%A4%ED%83%AD



<html>

 crosstab.htm

<head>
<title>----- HTML 틀고정 & 크로스탭 -----</title>
<style tyle="css/text">
 td  {font-size:9pt;color:black;}
 
 tr { height:22px; }
 
 #mainTable div td {text-align:center;}
 
 #left_header td{background-color:#999999;}
 
 #left_contents td{background-color:#eeeeee;}
 
 #right_header {margin:0 17 0 0}
 #right_header td{background-color:#999999;}
 
 #right_contents td{background-color:#eeeeee;}
 
 .margin_r17 { margin:0 17 0 0}
</style>
<script language="javascript">
<!--
    function fixDataOnWheel(){
        if(event.wheelDelta < 0){
            DataScroll.doScroll('scrollbarDown');
        }else{
            DataScroll.doScroll('scrollbarUp');
        }d
        dataOnScroll()
    }

    function dataOnScroll() {
        left_contents.scrollTop = right_contents.scrollTop;
        right_header.scrollLeft = right_contents.scrollLeft;
    }
//-->
</script>
</head>
<body topmargin="0" leftmargin="0">

<table id="mainTable" width="600px" height="100px" cellpadding="0" cellspacing="0" border="1">
    <tr>
        <td width="300" valign="top">
            <!-- LEFT HEADER(FIXED) START -->
            <div id="left_header" style="width:100%; overflow-x:hidden; overflow-y:hidden;">
                <table width="100%" cellspacing="0" cellpadding="0" border="1" style="table-layout:fixed">
                    <tr>
                        <td>FIX_H1</td>
                        <td>FIX_H2</td>
                        <td>FIX_H3</td>
                        <td>FIX_H4</td>
                    </tr>
                </table>
            </div>
            <!-- LEFT HEADER(FIXED) END-->
            <!-- LEFT CONTENTS(FIXED) START-->
            <div id="left_contents" style="height:expression(100-17); overflow-x:hidden; overflow-y:hidden;" onmousewheel="fixDataOnWheel()" onScroll="dataOnScroll()">
                <table width="100%" cellspacing="0" cellpadding="0" border="1" style="table-layout:fixed;">
                    <tr>
                        <td>FIX_C1</td>
                        <td>FIX_C2</td>
                        <td>FIX_C3</td>
                        <td>FIX_C4</td>
                    </tr>
                    <tr>
                        <td>FIX_C1</td>
                        <td>FIX_C2</td>
                        <td>FIX_C3</td>
                        <td>FIX_C4</td>
                    </tr>
                    <tr>
                        <td>FIX_C1</td>
                        <td>FIX_C2</td>
                        <td>FIX_C3</td>
                        <td>FIX_C4</td>
                    </tr>
                    <tr>
                        <td>FIX_C1</td>
                        <td>FIX_C2</td>
                        <td>FIX_C3</td>
                        <td>FIX_C4</td>
                    </tr>
                    <tr>
                        <td>FIX_C1</td>
                        <td>FIX_C2</td>
                        <td>FIX_C3</td>
                        <td>FIX_C4</td>
                    </tr>
                    <tr>
                        <td>FIX_C1</td>
                        <td>FIX_C2</td>
                        <td>FIX_C3</td>
                        <td>FIX_C4</td>
                    </tr>
                    <tr>
                        <td>FIX_C1</td>
                        <td>FIX_C2</td>
                        <td>FIX_C3</td>
                        <td>FIX_C4</td>
                    </tr>
                    <tr>
                        <td>FIX_C1</td>
                        <td>FIX_C2</td>
                        <td>FIX_C3</td>
                        <td>FIX_C4</td>
                    </tr>
                    <tr>
                        <td>FIX_C1</td>
                        <td>FIX_C2</td>
                        <td>FIX_C3</td>
                        <td>FIX_C4</td>
                    </tr>
                </table>
            </div>
            <!-- LEFT CONTENTS(FIXED) END-->
        </td>
        <td width="*" valign="top">
            <!-- RIGHT HEADER(CROSSTAB) START -->
            <div id="right_header" class="margin_r17" style="width:100%;overflow-x:hidden; overflow-y:hidden;">
                <table width="150%" cellspacing="0" cellpadding="0" border="1" style="table-layout:fixed">
                    <tr>
                        <td>CROSSTAB_H1</td>
                        <td>CROSSTAB_H2</td>
                        <td>CROSSTAB_H3</td>
                        <td>CROSSTAB_H4</td>
                    </tr>
                </table>
            </div>
            <!-- RIGHT HEADER(CROSSTAB) END -->
            <!-- RIGHT CONTENTS(CROSSTAB) START -->
            <div id="right_contents" style="width:300; height:100; overflow-x:scroll; overflow-y:scroll;" onScroll="dataOnScroll()">
                <table width="150%" cellspacing="0" cellpadding="0" border="1" style="table-layout:fixed">
                    <tr>
                        <td>CROSSTAB_C1</td>
                        <td>CROSSTAB_C2</td>
                        <td>CROSSTAB_C3</td>
                        <td>CROSSTAB_C4</td>
                    </tr>
                    <tr>
                        <td>CROSSTAB_C1</td>
                        <td>CROSSTAB_C2</td>
                        <td>CROSSTAB_C3</td>
                        <td>CROSSTAB_C4</td>
                    </tr>
                    <tr>
                        <td>CROSSTAB_C1</td>
                        <td>CROSSTAB_C2</td>
                        <td>CROSSTAB_C3</td>
                        <td>CROSSTAB_C4</td>
                    </tr>
                    <tr>
                        <td>CROSSTAB_C1</td>
                        <td>CROSSTAB_C2</td>
                        <td>CROSSTAB_C3</td>
                        <td>CROSSTAB_C4</td>
                    </tr>
                    <tr>
                        <td>CROSSTAB_C1</td>
                        <td>CROSSTAB_C2</td>
                        <td>CROSSTAB_C3</td>
                        <td>CROSSTAB_C4</td>
                    </tr>
                    <tr>
                        <td>CROSSTAB_C1</td>
                        <td>CROSSTAB_C2</td>
                        <td>CROSSTAB_C3</td>
                        <td>CROSSTAB_C4</td>
                    </tr>
                    <tr>
                        <td>CROSSTAB_C1</td>
                        <td>CROSSTAB_C2</td>
                        <td>CROSSTAB_C3</td>
                        <td>CROSSTAB_C4</td>
                    </tr>
                    <tr>
                        <td>CROSSTAB_C1</td>
                        <td>CROSSTAB_C2</td>
                        <td>CROSSTAB_C3</td>
                        <td>CROSSTAB_C4</td>
                    </tr>
                    <tr>
                        <td>CROSSTAB_C1</td>
                        <td>CROSSTAB_C2</td>
                        <td>CROSSTAB_C3</td>
                        <td>CROSSTAB_C4</td>
                    </tr>
                </table>
            </div>
            <!-- RIGHT CONTENTS(CROSSTAB) END -->
        </td>
    </tr>
</table>
</body>
</html>

저작자표시

'웹개발' 카테고리의 다른 글

[jQuery] 타도메인 iframe resize  (0) 2016.05.09

+ Recent posts

티스토리툴바