Iframe implements a cross browser adaptive height solution

This article illustrates the practical value of implementing a cross-browser adaptive height solution for Iframe as an example. Share with you for your reference. Specific methods are as follows:

This method USES jQuery, so you need to introduce it in the SRC page of the iframe.

The parent page is relatively simple, mainly including the following code:

<iframe id="if1" scrolling="no" src="2.html"></iframe>

In the SRC page of the iframe, the code is as follows:

<script type="text/javascript">
function resizeContent()
{
    $(window.parent.document).find("#if1").height($("#content").height());
}

function show400()
{
    if($("#test400").css("display") == "none")
    {
       $("#test400").css("display","");
       resizeContent();
    }
    else
    {
       $("#test400").css("display","none");
       resizeContent();
    }
}
$(document).ready(function(){
    resizeContent();
})
</script>
<div id="left111">
 <div class="mnav" onclick="test400()"></div>
 <div class="mnav"><a href="ProductList.html"> hyperlink </a></div>
 <div class="mnav"><a href="ProductCategory.html"> hyperlink </a></div>
 <div class="mnav"><a href="ProductCategory.html"> hyperlink </a></div>
 <div id="test400" style="display:none;height:400px;"></div>
 <div class="mnav"><a href="Orders.html"> hyperlink </a></div>
 <div class="mnav Mcurrent"><a href="Keywords.html"> hyperlink </a></div>
 <div class="mnav"><a href="#"> hyperlink </a></div>
 <div class="mnav"><a href="#"> hyperlink </a></div>
 <div class="mnav"><a href="#"> hyperlink </a></div>
 <div class="mnav"><a href="#"> hyperlink </a></div>
 <div class="mnav"><a href="#"> hyperlink </a></div>
 <div class="mnav"><a href="#"> hyperlink </a></div>
 <br />
</div>

Note:

Here below

$(window.parent.document).find("#if1").height($("#content").height()); 

The original sentence was:

$(window.parent.document).find("#if1").height($(document).height());

Adaptive heights can be achieved, but scaling is not. Because the height of the document is the highest that the content has ever appeared, if I click expand here, the iframe will not shrink, it will only show the highest that has ever appeared .

So we're going to use a parent container, which is the latest code. So you can be adaptive.

I believe that this article has a certain reference value for your jQuery programming.