{"id":8,"date":"2010-01-25T21:30:26","date_gmt":"2010-01-26T02:30:26","guid":{"rendered":"http:\/\/jamesroberts.name\/blog\/?p=8"},"modified":"2010-01-30T21:55:30","modified_gmt":"2010-01-31T02:55:30","slug":"resize-iframe-to-content-height","status":"publish","type":"post","link":"https:\/\/jamesroberts.name\/blog\/2010\/01\/25\/resize-iframe-to-content-height\/","title":{"rendered":"resize iframe to content height"},"content":{"rendered":"

So I was fooling with an iframed forum today and had to figure out how to make the iframe resize to the height of its content, just to keep things pretty.\u00a0 This can be done rather easily with a little javascript.<\/p>\n

\r\n<\/iframe>\r\n<script>\r\nwindow.resizeiframe1 = function(height){\r\ndocument.getElementById('forum-iframe1').style.height=(height+40)+'px';\r\n}\r\n<\/script>\r\n<\/pre>\n<p><strong>Step 2:<\/strong><\/p>\n<p>Add code to iframed page (mypage.html) to get the document\u2019s height and send it back to the resize function attached to the iframe\u2019s parent document once the iframe is loaded.<\/p>\n<pre lang=\"javascript\" line=\"1\">\r\n<html>\r\n<head>\r\n<script type=\"text\/javascript\">\r\nfunction getHeight(){\r\n\tvar height = (document.documentElement.clientHeight || document.body.clientHeight);\r\n\twindow.parent.resizeiframe1(height);\r\n}\r\n<\/script>\r\n<\/head>\r\n<body id=\"iframe-body\" onload=\"getHeight()\">\r\n<table height=\"500\"><tr><td>my content here<\/td><\/tr><\/table>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<p>Alternatively, if you use a javascript framework, such as prototype, its even easier.  Here is my example using prototype:<\/p>\n<p><strong>Step 1:<\/strong><\/p>\n<p>Create your iframe and attach a function to the document.<\/p>\n<pre lang=\"javascript\" line=\"1\">\r\n<iframe id=\"forum-iframe2\" width=\"100%\" frameborder=\"0\" src=\"mypage-prototype.html\"><\/iframe>\r\n<script>\r\nwindow.resizeiframe2 = function(height){\r\n$('forum-iframe2').setStyle({'height':(height+40)+'px'});\r\n}\r\n<\/script>\r\n<\/pre>\n<p><strong>Step 2:<\/strong><\/p>\n<p>Add code to iframed page (mypage.html) to get the document\u2019s height and send it back to the resize function attached to the iframe\u2019s parent document once the iframe is loaded.<\/p>\n<pre lang=\"javascript\" line=\"1\">\r\n<html>\r\n<head>\r\n<script type=\"text\/javascript\" src=\"prototype.js\"><\/script>\r\n<\/head>\r\n<body id=\"iframe-body\" onload=\"window.parent.resizeiframe2($('iframe-body').getHeight());\">\r\n<table height=\"500\"><tr><td>my content here<\/td><\/tr><\/table>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>So I was fooling with an iframed forum today and had to figure out how to make the iframe resize to the height of its content, just to keep things pretty.\u00a0 This can be done rather easily with a little javascript. View Demo Step 1: Create your iframe and attach a function to the document. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[6,61],"_links":{"self":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/8"}],"collection":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":33,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/8\/revisions"}],"predecessor-version":[{"id":48,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/8\/revisions\/48"}],"wp:attachment":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/media?parent=8"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/categories?post=8"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/tags?post=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}