{"id":1967,"date":"2012-07-24T16:31:55","date_gmt":"2012-07-24T15:31:55","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/?p=1967"},"modified":"2012-07-24T16:36:35","modified_gmt":"2012-07-24T15:36:35","slug":"iframe-auto-resize-with-jquery","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2012\/07\/24\/iframe-auto-resize-with-jquery\/","title":{"rendered":"iFrame auto-resize with jQuery"},"content":{"rendered":"<p>Inline frames are not the prettiest of HTML elements, but they can make your life a hell of a lot easier, especially with branching web application control panels, full of modals and cross-referenced entities. It\u2019s easy to design\/develop such interface if you know the height of the <code>iFrame<\/code> element, which is almost never the case. So here\u2019s the handy solution based on <a href=\"http:\/\/jquery.com\/\">jQuery<\/a> and with a little help of server-side scripting. Obviously, you\u2019d need to include jQuery in both files.<\/p>\n<h2>Parent page<\/h2>\n<pre>\r\n&#60;iframe \r\n    id=\"iframe-123\" \r\n    src=\"iframe.php?iframe_id=iframe-123\" \r\n    scrolling=\"no\" \r\n    frameborder=\"0\">\r\n&#60;\/iframe>\r\n\r\n&#60;script type=\"text\/javascript\">\r\n    function updateIframeSize(x,y){\r\n        if (x != '') {\r\n            $('#' + x).height(y + 'px');\r\n        }\r\n    }\r\n&#60;\/script>\r\n<\/pre>\n<h2>Inline frame page<\/h2>\n<pre>\r\n&#60;?php $iframe_id = isset($_GET['iframe_id']) ? $_GET['iframe_id'] : ''; ?>\r\n&#60;body>...&#60;\/body>\r\n&#60;script type=\"text\/javascript\">\r\n    function updateParent() { \r\n        parent.updateIframeSize('&#60;?= $iframe_id ?>',$('html').height());\r\n    }\r\n    $(document)\r\n        .ready(updateParent)\r\n        .click(updateParent);\r\n&#60;\/script>\r\n<\/pre>\n<p>For faster performance use the old school \u201cdirty\u201d method:<\/p>\n<pre>\r\n&#60;?php $iframe_id = isset($_GET['iframe_id']) ? $_GET['iframe_id'] : ''; ?>\r\n&#60;body\r\n    onload=\"updateParent()\"\r\n    onclick=\"updateParent()\">\r\n    ...\r\n&#60;\/body>\r\n&#60;script type=\"text\/javascript\">\r\n    function updateParent() { \r\n        parent.updateIframeSize('&#60;?= $iframe_id ?>',$('html').height());\r\n    }\r\n&#60;\/script>\r\n<\/pre>\n<p>You might want to give the <code>iFrame<\/code> reasonably small initial height in CSS, so the parent page doesn\u2019t excessively flick and jump back and forth while the <code>iFrame<\/code> content is loading.<\/p>\n<p>To make it completely client-side, read the value from <code>iframe_id<\/code> with <a href=\"https:\/\/developer.mozilla.org\/en\/DOM\/window.location\">window.location.search<\/a> property.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Inline frames are not the prettiest of HTML elements, but they can make your life a hell of a lot easier, especially with branching web application control panels, full of modals and cross-referenced entities. It\u2019s easy to design\/develop such interface if you know the height of the iFrame element, which is almost never the case. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[24,70],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/1967"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=1967"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/1967\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=1967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=1967"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=1967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}