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

This article mainly introduces how Iframe adapts to a high degree, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand.

When building the index.html S system interface, we often encounter the situation of nesting other pages in the main page index.html. Although existing libraries have provided controls (such as jQuery easy UI), sometimes the use of iframe is inevitable. This article should give you a relatively practical answer. As the article said, most of the things on the Internet are rubbish or unbelievable! The original text is sorted out by KOUBEI UED by the school!

Why are there three talks?

Why the three talks? One is because this is really a bad topic, and the other is because Master Tai wrote this article n years ago to talk about the high degree of iframe adaptation. The reason for mentioning this question again is that all aspects of the problem have indeed been encountered in the previous project, so it is necessary to summarize it. I hope it will be helpful to all of you. Please correct any mistakes.

The height of the same domain and sub-pages will not increase dynamically.

In this case, it is easiest to get the actual height of the word page directly through the script and modify the height of the iframe element. But there are two points that must be noted:

If there are absolute positioning or no floating elements in the page, the situation is a bit complicated. Different browsers have different processing results, even including browsers with Webkit kernel. For more information, please see this Demo. So you can either do browser detection, or use Math.max to calculate a maximum value, or you can think of another way.

The pages contained in iframe may be very large and take a long time to load, so when calculating the height directly, it is likely that there will be a problem with the height calculation before the page is downloaded. So it is best to calculate the height in the onload event of iframe. Also note here that the Microsoft event model obj.attachEvent must be used to bind onload events under IE. Other browsers can also directly obj.onload = function () {}.

The code is as follows:

(function () {

Var frame = document.getElementById ("frame_content_parent")

SetIframeHeight = function () {

Var frameContent = frame.contentWindow.document

FrameHeight = Math.max (frameContent.body.scrollHeight,frameContent.documentElement.scrollHeight)

Frame.height = frameHeight

}

If (frame.addEventListener) {

Frame.addEventListener ("load", setIframeHeight,false)

} else {

Frame.attachEvent ("onload", setIframeHeight)

}

) ()

The height of the same domain and sub-pages will increase dynamically.

The principle is the same as the first case, one more timer, always detect the word page height, when the sub-page height is not consistent with the height of iframe, reset the height of iframe. You can also add a try here to add a sufficient height in the event of a js error.

The code is as follows:

(function () {

Var _ reSetIframe = function () {

Var frame = document.getElementById ("frame_content_parent")

Try {

Var frameContent = frame.contentWindow.document

BodyHeight = Math.max (frameContent.body.scrollHeight,frameContent.documentElement.scrollHeight)

If (bodyHeight! = frame.height) {

Frame.height = bodyHeight

}

}

Catch (ex) {

Frame.height = 1800

}

}

If (frame.addEventListener) {

Frame.addEventListener ("load", function () {setInterval (_ reSetIframe,200);}, false)

} else {

Frame.attachEvent ("onload", function () {setInterval (_ reSetIframe,200);})

}

) ()

In the same domain, the height of the subpage will increase dynamically, and the script may fail completely.

In the second example, the script error is taken into account, but if the script doesn't execute at all, the content in the iframe will not be displayed because the iframe is not high enough. For this reason, we usually set a sufficient height in advance. For the convenience of front-end control, I think it is more appropriate to write it in the CSS file. When you need to modify it, just change the CSS. Here I set up selector {height:1800px;}. It should be noted that styles written in stylesheets cannot be taken directly with node. style [property], node.currentStyle [property] is used for Microsoft models (aside: tragic IE models do not support CSS pseudo-classes), and for W3C models, window.getComputedStyle (node,null) [property] is used. I use YUI directly for convenience here.

Another problem here is that when you set the height of the iframe to be greater than the height of the page it contains, each browser handles it differently. For example, in Firefox, the height of the body element must be calculated, and the height of the html element is equal to the height of the iframe. However, when it so happens that this page has absolute positioning, not clear floating elements, and can not be taken through the body element, obviously the first method has less disadvantages. Please take a look at this Demo for details.

As you can see from the Demo above, all browsers except IE calculate the height of iframe, that is, the # frame_content_parent {height:1800px;} set in CSS. IE calculates the actual height of the page referenced by iframe.

The code is as follows:

# frame_content_parent {height:1800px;}

(function () {

Var $= YAHOO.util.Dom

Frame = $.get ("frame_content_parent")

Function reSetIframe () {

Var frameContent = frame.contentWindow.document

BodyHeight = Math.max (frameContent.documentElement.scrollHeight,frameContent.body.scrollHeight)

If (bodyHeight! = $.getStyle (frame, "height")) {

$.setStyle (frame, "height", bodyHeight + "px")

}

}

If (frame) {

$.setStyle (frame, "height", "auto")

SetInterval (reSetIframe,300)

}

) ()

Cross-domain

Here is an Iframe proxy method, a brief description of the principle. Suppose there are three pages, namely, the main page A.html, the word page B.html, and the proxy page C.html. Where An and B are cross-domain, while An and C are in the same domain. Their relationship: a contains B, B contains C. Obviously An and B, as well as B and C, because cross-domain cannot communicate with each other, while An and C can communicate with each other in the same domain. For this reason, we thought of asking the C page to tell the A page how high the B page is. Because B and C are also cross-domain and cannot communicate with each other, so it is not feasible to directly window.parent.document.body.scrollHeight in the C page, so we can only let the B page calculate its own height, then tell the C page in some way, and then tell the A page by the C page. One method here is to generate an Iframe node on the B page, then set its src attribute, and attach a parameter to this address, that is, the height calculated by the B page, and then the C page can get the address in this address bar through _ window.location, extract the height value, find the A page through window.top, and set the Iframe height of the A page. This is the basic principle. Look at the code:

DEMO

The code is as follows:

/ / B page script

/ / Task: calculate its actual height, and then generate an iframe node that assigns the height to the Src attribute as part of the address of the proxy page C.

(function () {

Var agent_iframe = document.createElement ("iframe")

B_height = Math.max (document.documentElement.scrollHeight,document.body.scrollHeight)

Agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe_once.html#" + b_height"

Document.body.appendChild (agent_iframe)

Agent_iframe.style.display = "none"

) ()

The code is as follows:

/ / C page script

/ / Task: get the height value in the request address and assign it to the height of the Iframe on page A

Window.top.document.getElementById ("frame_content_parent"). Height = parseInt_ (window.location.hash.substring (1), 10)

Dynamic change of cross-domain and word page height

Here is a combination of the second and fourth methods, my idea is in the B page through a timer, constantly calculate the height of the B page, as soon as the change, immediately modify the src attribute of the iframe tag, while the C page also has a timer constantly listening for changes in src, changing the height of the Aiframe tag. It is important to note that only by changing the anchor value after the src attribute (such as "# 1234"), the page will not be refreshed and will not be re-requested, which is why timers are added to the C page.

The code is as follows:

/ / B page script

(function () {

Var getHeight = function () {

Return Math.max (document.documentElement.scrollHeight,document.body.scrollHeight)

}

Var preHeight = getHeight ()

Agent_iframe

Var createIframe = function (height) {

Agent_iframe = document.createElement ("iframe")

Agent_iframe.style.height = "0"

Agent_iframe.style.width = "0"

Agent_iframe.style.border = "none"

Agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + height"

Document.body.appendChild (agent_iframe)

}

CreateIframe (preHeight)

Var checkHeight = function () {

Var currentHeight = getHeight ()

If (currentHeight! = preHeight) {

Agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + currentHeight"

PreHeight = currentHeight

}

SetTimeout (checkHeight,500)

}

SetTimeout (checkHeight,500)

) ()

The code is as follows:

/ / C page script

(function () {

Var preHeight = parseInt_ (window.location.hash.substring (1), 10)

Ifrmae = window.top.document.getElementById ("frame_content_parent")

Ifrmae.height = preHeight

SetInterval (function () {

Var newHeight = parseInt_ (window.location.hash.substring (1), 10)

If (newHeight! = = preHeight) {

Ifrmae.height = newHeight

PreHeight = newHeight

}

}, 500)

) ()

Another solution here is to have iframe rerequest each time, so that the C page does not need a timer, but if the calculation is highly repeated twice, it will result in the same value of the src property, so that the browser will not rerequest the page, and the script in the C page will not run. To fix this problem, simply add a random number parameter to each calculated src property. Like http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?temp=123123423712937#1563.

The code is as follows:

/ / key script on the B page

Agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?a=" + Math.random () +" # "+ currentHeight

/ / C page script

Window.top.document.getElementById ("frame_content_parent"). Height = parseInt_ (window.location.hash.substring (1), 10)

Thank you for reading this article carefully. I hope the article "how to adapt to Iframe" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.