관리 메뉴

심재운 블로그

아이프레임 iframe 리사이즈 resize 조절 하는 방법 본문

프로그래밍/JavaScript

아이프레임 iframe 리사이즈 resize 조절 하는 방법

재우니 2017. 8. 9. 15:25


아이프레임 iframe 리사이즈 resize 조절 하는 방법

https://github.com/davidjbradshaw/iframe-resizer


부모 페이지

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"/> <title></title> <style> body { margin: 0; padding: 0; } </style> </head> <body> <iframe src="https://www.xxxxx.com" width="100%" scrolling="no" frameborder="0"></iframe> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="/js/iframeResizer.min.js"></script> <script type="text/javascript"> iFrameResize({ log : false, // Enable console logging inPageLinks : true, resizedCallback : function(messageData){ // Callback fn when resize 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 ); }, messageCallback : function(messageData){ // Callback fn when message is received $('p#callback').html( '<b>Frame ID:</b> ' + messageData.iframe.id + ' <b>Message:</b> ' + messageData.message ); alert(messageData.message); document.getElementsByTagName('iframe')[0].iFrameResizer.sendMessage('Hello back from parent page'); }, closedCallback : function(id){ // Callback fn when iFrame is closed $('p#callback').html( '<b>IFrame (</b>' + id + '<b>) removed from page.</b>' ); } }); </script> </body> </html>


iframe 자식 페이지


<script type="text/javascript" src="/js/iframeResizer.contentWindow.min.js"></script>






0 Comments
댓글쓰기 폼