{"id":659,"date":"2013-09-14T16:19:37","date_gmt":"2013-09-14T16:19:37","guid":{"rendered":"http:\/\/www.w3.org\/community\/forum\/?p=659"},"modified":"2013-09-14T16:19:37","modified_gmt":"2013-09-14T16:19:37","slug":"how-to-make-iframe-resize-based-on-dynamic-content-each-time-the-content-height-changes","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/forum\/2013\/09\/14\/how-to-make-iframe-resize-based-on-dynamic-content-each-time-the-content-height-changes\/","title":{"rendered":"How to make iFrame resize based on dynamic content each time the content height changes?"},"content":{"rendered":"

Is there any way of making the iframe change its height after the content inside changes?<\/p>\n

Example:\u00a0http:\/\/thc-racing.ucoz.com\/index\/forum\/0-14<\/a><\/p>\n

I’m using easyXDM<\/p>\n

Page code:<\/p>\n

<script type=\"text\/javascript\" src=\"http:\/\/thc-racing.ucoz.com\/design\/forum-external\/xdm\/easyXDM.js\"><\/script> <div id=\"page-body\"> <!-- do not define an iframe, it will get generated for you in this container --> <\/div> <script type=\"text\/javascript\"> new easyXDM.Socket({ remote: \"http:\/\/thc-racing.forumotion.co.uk\/\", container: document.getElementById(\"page-body\"), onMessage: function(message, origin){ this.container.getElementsByTagName(\"iframe\")[0].style.height = message + \"px\"; this.container.getElementsByTagName(\"iframe\")[0].style.width = \"900px\"; } }); <\/script><\/code><\/pre>\n
iFramed page:<\/p>\n
<script type=\"text\/javascript\" src=\"http:\/\/thc-racing.ucoz.com\/design\/forum-external\/xdm\/easyXDM.js\"><\/script> <script type=\"text\/javascript\"> var socket = new easyXDM.Socket({ onReady: function() { \/\/ this is needed for setting height on initial load socket.postMessage(document.body.scrollHeight) }, onMessage: function(message, origin){ \/\/ this is called from consumer (maybe by a timer) socket.postMessage(document.body.scrollHeight) } }); <\/script><\/code><\/pre>\n
Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"
Is there any way of making the iframe change its height after the content inside changes? Example:\u00a0http:\/\/thc-racing.ucoz.com\/index\/forum\/0-14 I’m using easyXDM Page code: <script type=”text\/javascript” src=”http:\/\/thc-racing.ucoz.com\/design\/forum-external\/xdm\/easyXDM.js”><\/script> <div id=”page-body”> <!– do not define an iframe, it will get generated for you in … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":5122,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[87,89,84,90,76,88,86,85],"class_list":["post-659","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-cross-domain","tag-dynamic","tag-easyxdm","tag-height","tag-html","tag-iframe","tag-js","tag-script"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/forum\/wp-json\/wp\/v2\/posts\/659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3.org\/community\/forum\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3.org\/community\/forum\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/forum\/wp-json\/wp\/v2\/users\/5122"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/forum\/wp-json\/wp\/v2\/comments?post=659"}],"version-history":[{"count":3,"href":"https:\/\/www.w3.org\/community\/forum\/wp-json\/wp\/v2\/posts\/659\/revisions"}],"predecessor-version":[{"id":662,"href":"https:\/\/www.w3.org\/community\/forum\/wp-json\/wp\/v2\/posts\/659\/revisions\/662"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/forum\/wp-json\/wp\/v2\/media?parent=659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/forum\/wp-json\/wp\/v2\/categories?post=659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/forum\/wp-json\/wp\/v2\/tags?post=659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}