GOOCODE - Find your code/scripts

12 Work we encountered iframe embedded in a page highly adaptive problems. Because we do not know iframe content page will be loaded high, I do not want to appear ugly scroll bars on the page, this time we can use javascript to dynamically make iframe highly adaptive.


Ready to work
We are ready to face a home a.html, and page two for embedded iframe for iframeH.html and iframeH1.html, content can easily add your own, respectively, practical applications may be Background generated content.
To demonstrate, we add the following code in the main page a.html in:

<div class="demo">
	<div class="opt_btn">
		<button onclick="getData('iframeH');">Loading Content 1</button>
		<button onclick="getData('iframeH2');">Loading Content 2</button>
	</div>
	<iframe src="iframeH.html" id="ifrm" frameborder="0" width="100%" scrolling="no" marginheight="0" marginwidth="0" onload="setIframeHeight(this.id)"></iframe>
</div>

We must realize that each click on the two buttons, iframe load different content, iframe can not appear in the scroll bar.

javascript
First, we use javascript to dynamically change the iframe src value, namely when clicking two buttons, different content pages iframe loaded. Code button button calls the custom function respectively getData () to achieve the effect of switching the content.

function getData(ifm){ 
    document.getElementById("ifrm").src = ifm+'.html'; 
} 

Then, we focus on the contents of the iframe, because we do not know in advance the contents of iframe height, if the height of the first set iframe height value, it may appear long scroll bar when the page content, this is not what we want. Then we use javascript to dynamically obtain iframe page height, then set iframe height.
Fully loaded after the iframe onload, call setIframeHeight (), after the iframe content loading is complete, you can get iframe height value, and then re-set iframe height, the following is tidied Code:

function setIframeHeight(id) { 
    var ifrm = document.getElementById(id); 
    var doc = ifrm.contentDocument? ifrm.contentDocument:  
        ifrm.contentWindow.document; 
    ifrm.style.visibility = 'hidden'; 
    ifrm.style.height = "10px"; // reset to minimal height ... 
    ifrm.style.height = getDocHeight( doc ) + 4 + "px"; 
    ifrm.style.visibility = 'visible'; 
} 
 
function getDocHeight(doc) { 
    doc = doc || document; 
    var body = doc.body, html = doc.documentElement; 
    var height = Math.max( body.scrollHeight, body.offsetHeight,  
        html.clientHeight, html.scrollHeight, html.offsetHeight ); 
    return height; 
} 

Dom iframe operation Note: This article talked about adaptation and the previous article are operating under the same domain based on that achieved in the same domain, so if that is in a different domain is not such cross-border operations. About cross-domain iframe related to the operation site presentation please pay attention to the next article.