First, a primer
Let's take a look at an example, there are two pages, 1.html embedded 2.html through the IFRAME, two pages are the same domain
1.html
1.html< ;/title>
</head>
</body>
</html></pre>
<p><p><strong>2.html</strong>, a lot of P elements will be highly elevated.</p></p>
<pre>
<! DOCTYPE html>
<ptml>
<pead>
<meta charset= "Utf-8" >
<title>2.html</ title>
</head>
<body>
<p> This is a ifrmae, embedded in HTTP://SNANDY.GITHUB.IO/LIB/IFRAME/1. HTML </p>
<p> adjusting height according to its content </p>
<p>a</p><p>a</p><p>a</p ><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</body>
</html></pre>
<p><p>At this point, the browser access to 1.html, the effect is as shown</p></p>
<p><p></p></p>
<p><p>You can see that the embedded IFRAME has a scroll bar, the demand is not want to appear scroll bar, the number of pages to show how much. We can't set a height for the IFRAME because you don't know how high the embedded IFRAME is (the content is dynamically generated).</p></p>
<p><p>Ii. Solutions</p></p>
<p><p>The solution is actually very simple, nothing more than the 1.html to set a height of the iframe, the height of the value of 2.html is the content of height. Note that the 2.html content height requires the page to be fully loaded (onload) after the acquisition.</p></p>
<p><p>There are two different ways</p></p>
<p><p>A. js code written in the parent page, that is, the parent page (1.html) to get the child page (2.html) Document object, when the IFRAME load (load) to obtain a height, the value of this height assigned to the IFRAME label</p></p>
<p><p>The Contentwindow Load event of the IFRAME is used when the test is started, but none of the browsers are executed. Finally, using the IFRAME Load event, add the following JS code at the bottom 1.html of the parent page</p></p>
<pre>
<script type= "Text/javascript" >
//Calculate the actual height of the page, IFRAME Adaptive will use
function Calcpageheight (doc) {
var c Height = Math.max (Doc.body.clientHeight, doc.documentElement.clientHeight)
var sheight = Math.max (Doc.body.scrol Lheight, doc.documentElement.scrollHeight)
var height = Math.max (cheight, sheight) return
height
var IFR = document.getElementById ("IFR")
ifr.onload = function () {
var iDoc = Ifr.contentdocume NT ifr.document
var height = calcpageheight (iDoc)
ifr.style.height = height + "px"
}
<c15 /></script></pre>
<p><p>Here are a few details:</p></p>
<p><p>1. Take the document object within the IFRAME, the standard browser uses the Contentdocument property, ie low version (ie6,7,8) uses the document attribute.</p></p>
<p><p>2. Calcpageheight function calculates the actual height of the page, the standard browser uses the Document.documentelement, the low version IE uses Document.body, the default take ClientHeight, the scroll bar to take the scrollheight, and finally take the largest of two values.</p></p>
<p><p>B. js code written in the child page, that is, the child page in the window load after the calculation of height, the height value assigned to the parent page of the IFRAME</p></p>
<p><p>Add the following code at the bottom of the sub page (2.html)</p></p>
<pre>
<script>
/Calculate the actual height of the page, IFRAME Adaptive will use
function Calcpageheight (doc) {
var cheight = Math.max (Doc.body.clientHeight, Doc.documentElement.clientHeight)
var sheight = Math.max (Doc.body.scrollHeight, doc.documentElement.scrollHeight)
var height = Math.max (cheight , sheight) return
height
}
window.onload = function () {
var height = Calcpageheigh T (document)
parent.document.getElementById ("IFR"). Style.height = height + "px"
}
</scrip T></pre>
<p><p>In both ways, you can achieve a highly adaptive iframe, you can see the height of the iframe reset, the scroll bar has been removed.</p></p>
<br>
<br>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
