Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how Javascript makes iframe adaptive height". In daily operation, I believe many people have doubts about how Javascript makes iframe adaptive height. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how Javascript makes iframe adaptive height"! Next, please follow the editor to study!

In our work, we encountered the problem that iframe embedded pages are highly adaptive. Because we don't know how tall the loaded iframe content page will be, and we don't want an ugly scroll bar on the page, we can use Javascript to dynamically make iframe adaptive to height.

Preparatory work

We prepare a main page a.html, and two pages for embedding iframe are iframeH.html and iframeH1.html, respectively. The content can be added freely, which may be generated by the background in the actual application.

To demonstrate, let's add the following code to the main page a.html:

Load content 2

What we want to achieve is to click two buttons separately, different contents are loaded in iframe, and scroll bars cannot appear in iframe.

Javascript

First, we use Javascript to dynamically change the src value of iframe, that is, when two buttons are clicked, the iframe loads different page content. In the code, the button button calls the custom function getData () respectively to achieve the effect of switching content.

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

Then, let's focus on the content in iframe, because we don't know the content height of iframe in advance. If we set the height height value of iframe first, it is likely that a scroll bar will appear when the page content is too long, which is not what we want. So we use Javascript to dynamically get the height of the iframe page, and then set the height of the iframe.

After the iframe is fully loaded, onload. Call setIframeHeight (). After the iframe content is loaded, you can get the height value of the iframe, and then reset the height of the iframe. The following code is sorted out:

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;}

At this point, the study on "how Javascript makes iframe highly adaptive" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.