{"id":252,"date":"2010-02-19T18:52:35","date_gmt":"2010-02-19T16:52:35","guid":{"rendered":"http:\/\/kinsey.no\/blog\/?p=252"},"modified":"2010-04-08T21:44:54","modified_gmt":"2010-04-08T19:44:54","slug":"resizing-iframes-using-easyxdm","status":"publish","type":"post","link":"https:\/\/kinsey.no\/blog\/index.php\/2010\/02\/19\/resizing-iframes-using-easyxdm\/","title":{"rendered":"Resizing iframes using easyXDM"},"content":{"rendered":"<p>One thing that many are using easyXDM (and other cross-domain hacks) for, is to dynamically change the size of embedded iframes based on the contents size, so as to avoid the scrollbars.<\/p>\n<p>To make it easier to do this using easyXDM, I have now published an example how how to do this <a href=\"http:\/\/easyxdm.net\/example\/resize_iframe.html\">here<\/a>.<\/p>\n<p>It really is easy, on the page hosting the iframe you use the following to load the iframe<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar transport = new easyXDM.transport.BestAvailableTransport({\r\n    local: &quot;..\/hash.html&quot;,\r\n    remote: &quot;http:\/\/provider.easyxdm.net\/example\/resized_iframe.html&quot;,\r\n    container: document.getElementById(&quot;element_that_should_contain_the_frame&quot;),\r\n    onMessage: function(message, origin){\r\n        this.container.getElementsByTagName(&quot;iframe&quot;)[0].style.height = message + &quot;px&quot;;\r\n    }\r\n});\r\n<\/pre>\n<p>And then you put the following in the iframes body after the content<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar transport = new easyXDM.transport.BestAvailableTransport({}, function(){\r\n    transport.postMessage(document.body.scrollHeight);\r\n});\r\n<\/pre>\n<p>Thats it!<br \/>\nAgain, the sample can be viewed <a href=\"http:\/\/easyxdm.net\/example\/resize_iframe.html\">here<\/a>.<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>One thing that many are using easyXDM (and other cross-domain hacks) for, is to dynamically change the size of embedded iframes based on the contents size, so as to avoid the scrollbars. To make it easier to do this using easyXDM, I have now published an example how how to do this here. It really [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[56],"tags":[33,58,8,59],"_links":{"self":[{"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/posts\/252"}],"collection":[{"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":9,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/posts\/252\/revisions"}],"predecessor-version":[{"id":284,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/posts\/252\/revisions\/284"}],"wp:attachment":[{"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}