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

Today, the editor will share with you the relevant knowledge points about how js controls Iframe with a high degree of self-adaptability. the content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Method 1: js control Iframe highly adaptive

This method has been used before, there is no problem, but the latest found that some cases do not work (the specific reason is not clear)

/ * function thisIframeHeightAuto () {setIframeHeight ("auditList");}; * / / window.setInterval ("iframeHeightAuto ()", 200); function setIframeHeight (iframeId) {var cwin = document.getElementById (iframeId); if (document.getElementById) {if (cwin & &! window.opera) {if (cwin.contentDocument & cwin.contentDocument.body.offsetHeight) {cwin.height = cwin.contentDocument.body.offsetHeight / / FF NS console.log ("FF NS cwin.height=" + cwin.height);} else if (cwin.Document & & cwin.Document.body.scrollHeight) {cwin.height= cwin.Document.body.scrollHeight;//IE console.log ("IE cwin.height=" + cwin.height) } else if (cwin.contentWindow.document & & cwin.contentWindow.document.body.scrollHeight) {cwin.height= cwin.contentWindow.document.body.scrollHeight;//Opera}} console.log ("cwin.height=" + cwin.height);}

Method 2: html code control

When method one does not work, method two is used.

The html of the header does not need any declaration and is removed, as shown in the following code:

Iframe is highly adaptive

If the upper part is adaptive, there is no need for the lower one; if the upper part is not adaptive, it needs to be set.

1. Overflow: hidden; in body style is absolutely not omitted.

2. Height='100%' and scroll bar in Iframe cannot be set to no (default is yes, no need to set it)

Method 3: also js control (unverified)

Principle:

The content of the Iframe page is wrapped by one, and the div adapts to the internal height, so the sub-page height can be obtained through div.

Iframe page

...

Add js to the parent page (the page embedded in Iframe):

/ / Cross-domain or sub-pages without "iframeContent" are highly unable to adapt function reinitIframe (iframeId, minHeight) {try {var iframe = document.getElementById (iframeId); var height = iframe.contentWindow.document.getElementById ("iframeContent"). OffsetHeight; if (! height) {height = minHeight;} if (height)

< minHeight) { height = minHeight; } iframe.style.height = height + "px"; } catch (e) { iframe.style.height = minHeight + "px"; }} 方法四：同样是js控制（未验证） var browserVersion = window.navigator.userAgent.toUpperCase();var isOpera = browserVersion.indexOf("OPERA") >

-1? True: false;var isFireFox = browserVersion.indexOf ("FIREFOX") >-1? True: false;var isChrome = browserVersion.indexOf ("CHROME") >-1? True: false;var isSafari = browserVersion.indexOf ("SAFARI") >-1? True: false;var isIE = (!! window.ActiveXObject | | "ActiveXObject" in window); var isIE9More = (!-[1,] = = false); function reinitIframe (iframeId, minHeight) {try {var iframe = document.getElementById (iframeId); var bHeight = 0; if (isChrome = = false & & isSafari = false) {try {bHeight = iframe.contentWindow.document.body.scrollHeight } catch (ex) {}} var dHeight = 0; if (isFireFox = = true) dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2 / / if Firefox browser height continues to increase, delete + 2 else if (isIE = = false & & isOpera = = false & & iframe.contentWindow) {try {dHeight = iframe.contentWindow.document.documentElement.scrollHeight } catch (ex) {}} else if (isIE = = true & & isIE9More) {/ / ie9+ var heightDeviation = bHeight-eval ("window.IE9MoreRealHeight" + iframeId); if (heightDeviation = = 0) {bHeight + = 3 } else if (heightDeviation! = 3) {eval ("window.IE9MoreRealHeight" + iframeId + "=" + bHeight); bHeight + = 3;} else//ie [6-8], OPERA bHeight + = 3; var height = Math.max (bHeight, dHeight); if (height < minHeight) height = minHeight / / alert (iframe.contentWindow.document.body.scrollHeight + "~" + iframe.contentWindow.document.documentElement.scrollHeight); iframe.style.height = height + "px";} catch (ex) {}} / / scheduled tasks function startInit (iframeId, minHeight) {eval ("window.IE9MoreRealHeight" + iframeId + "= 0"); window.setInterval ("reinitIframe ('" + iframeId + "," + minHeight + ")", 100) } these are all the contents of the article "how js controls Iframe highly adaptive". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.