Iframe adjusts height according to content change

prerequisite: the subpage is a third-party website, which is equivalent to uncontrollable

.

needs to be implemented: the parent page iframe cancels the scroll bar and shows the content of the child page, and when the content of the child page changes, the parent page adapts to its height

implementation process:
I initially tried to get the window height of the child page, but the result could not be obtained due to the cross-domain problem of the document.
later tried to use postMessage, but the third party did not get the interface to accept data and return data, so it could not get

so I"d like to ask you how to deal with this situation


onload= "this.height=rightFrame.document.body.scrollHeight;" I don't know if I can solve your problem


first of all, you need to be able to access the box that wraps iframe in iframe. You need to transfer the box id to iframe

<div id="a">    
    <iframe height="0" src="./iframe.html?boxid=a">
</div>

then find the iframe under the box

//iframe
var body=document.getElementsByTagName('body')[0] ,
    iframeParent = window.parent.document.getElementById(box_id), //dom
    iframe = iframeParent.getElementsByTagName('iframe')[0];

finally, assign a value to the iframe height.

  //iframe
  iframe.height = body.offsetHeight

it should be like this, uh-huh, probably, uh-huh, maybe.

Menu