Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Since you have control over the content in the iframe you could try window <a href="https://developer.mozilla.org/en-US/docs/DOM/window.postMessage" rel="nofollow" title="message">message</a> events.</p> <p>Add this to your frame content:</p> <pre><code>// post a message to the top window with information about the height window.onload = function(){ top.postMessage(document.body.scrollHeight, '*'); } </code></pre> <p>And this to your page containing the iframe:</p> <pre><code>// listen for the message and set the iframe height when it arrives window.addEventListener( "message", function(event){ document.getElementById('test').style.height = event.data+'px'; }, false); &lt;iframe id="test" src="test.html"/&gt; </code></pre> <hr> <p>In response to your comment. Here are some ways you can update the iframe height when the iframe content changes.</p> <p><strong>1.</strong> <a href="https://developer.mozilla.org/en-US/docs/DOM/Mutation_events" rel="nofollow" title="Mutation Events">Mutation Events</a></p> <pre><code>// listen to all descendants of the body and if there are any modifications, post an update to the top window document.body.addEventListener("DOMSubtreeModified", function(){ top.postMessage(document.body.scrollHeight, '*'); }, false); </code></pre> <p>That approach has been depreciated. This is the replacement but it is not yet fully supported:</p> <p><strong>2.</strong> <a href="https://developer.mozilla.org/en-US/docs/DOM/MutationObserver?redirectlocale=en-US&amp;redirectslug=DOM/DOM_Mutation_Observers" rel="nofollow" title="Mutation Observers">Mutation Observers</a></p> <pre><code>// create a MutationObserver to listen for modification to the body and post an update to the top window var observer = new MutationObserver(function(){ top.postMessage(document.body.scrollHeight, '*'); }); observer.observe(document.body, {childList: true, subtree: true}); </code></pre> <p>I would go with the first option until the second is better supported</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload