Iframe implementation of cross-browser adaptive height solution_jquery

This article describes the cross-browser adaptive height solution for Iframe in the form of examples, which is of great practical value. Share it with everyone for your reference. The specific method is as follows:

This method uses jQuery, so jQuery needs to be introduced into the src page of the iframe.

The parent page is relatively simple and mainly contains the following code:

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

The code in the src page of the iframe 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">超级链接</a></div>
 <div class="mnav"><a href="ProductCategory.html">超级链接</a></div>
 <div class="mnav"><a href="ProductCategory.html">超级链接</a></div>
 <div id="test400" style="display:none;height:400px;"></div>
 <div class="mnav"><a href="Orders.html">超级链接</a></div>
 <div class="mnav Mcurrent"><a href="Keywords.html">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <br />
</div>

Note:

Here

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

This sentence originally read:

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

Adaptive height can be achieved, but scaling adaptation cannot be achieved. Because the height of the document is the highest height that the displayed content has ever appeared, so if you click to expand here, the iframe will not shrink and will only display the highest ever height .

So a parent container is used here, which is the latest code. In this way, self-adaptation can be achieved.

I believe that what is described in this article has certain reference value for everyone’s jQuery programming.