About IFRAME adaptive height (from: http://ued.koubei.com /? P = 1217)

Iii. IFRAME adaptive height by school

 

Why is it three?

Why is it three? First, this is really a bad topic, and second, it is because I wrote this article about IFRAME adaptive height N years ago. This problem was raised because all aspects of the problem were encountered in the project. It is necessary to summarize the problem. I hope to help you. please correct me if you have any errors.

 

The height of the same domain and subpage does not increase dynamically

This is the simplest case. You can directly obtain the actual height of the word page through a script and modify the height of the IFRAME element. Note the following two points:

 

If there are absolute positioning or non-floating elements on the page, the situation is somewhat complicated. Different browsers have different processing results, or even browsers with WebKit kernels, please refer to this demo for details. Therefore, you can either perform browser detection or use math. Max to calculate a maximum value, or you want to use another method.

The IFRAME page may be very large and takes a long time to load. Therefore, when the height is calculated directly, it is very likely that the page has not been downloaded, and the height calculation will be problematic. Therefore, it is best to calculate the height in the IFRAME onload event. Note that the Microsoft Event model obj. attachevent must be used in IE to bind the onload event. Other browsers can also directly obj. onload = function.

 

(Function (){

VaR frame = Document. getelementbyid ("frame_content_parent "),

Setiframeheight = function (){

VaR framecontent = frame.contentdomaindoc ument,

Frameheight = math.max(framecontent.body.scrollheight,framecontent.doc umentelement. scrollheight );

 

Frame. Height = frameheight;

};

If (frame. addeventlistener ){

Frame. addeventlistener ("LOAD", setiframeheight, false );

} Else {

Frame. attachevent ("onLoad", setiframeheight );

}

})();

The height of the same domain and subpage will be dynamically increased

The principle is the same as that in the first case. A timer always checks the height of the word page. When the height of the Child page is different from that of the IFRAME, reset the height of the IFRAME. You can also add a try to add a sufficient height when a JS error occurs.

 

 

(Function (){

VaR _ resetiframe = function (){

VaR frame = Document. getelementbyid ("frame_content_parent ")

Try {

VaR framecontent = frame.contentdomaindoc ument,

Bodyheight = math.max(framecontent.body.scrollheight,framecontent.doc umentelement. 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 );});

}

})();

The height of the same domain and sub-page will be dynamically increased, and the script may be completely invalid.

In the second example, the script error is taken into account, but if the script is not executed at all, the content in IFRAME will not be displayed because of the height of IFRAME. For this reason, we usually set a sufficient height in advance. For the convenience of front-end control, I think it is appropriate to write it in a CSS file. You only need to change the CSS when you need to modify it. Here I set selector {Height: 1800px ;}. Note that node cannot be used directly for styles written in the style sheet. style [property]. For Microsoft models, use node. currentstyle [property] (subject: the tragic ie model does not support CSS pseudo-classes). For W3C models, use window. getcomputedstyle (node, null) [property. Yui is easy to use here.

 

Another problem is that when the height of IFRAME is set to be greater than the height of its contained page, the processing of different browsers is different. For example, in Firefox, the height of the Body element must be calculated, while the height of the HTML element is equal to the height of IFRAME. However, when this page happens to have an absolute positioning or unfloating element, it cannot be obtained through the body element. Obviously, the first method has fewer disadvantages. For details, refer to this demo.

 

From the demo above, we can see that, except for the IE browser, the height calculated by other browsers is the IFRAME, that is, # frame_content_parent {Height: 1800px;} set in CSS ;}. IE calculates the actual height of the pages referenced by IFRAME.

 

 

# Frame_content_parent {Height: 1800px ;}

 

(Function (){

VaR $ = Yahoo. util. Dom,

Frame = $. Get ("frame_content_parent ");

Function resetiframe (){

VaR framecontent = frame.contentdomaindoc ument,

Bodyheight = math.max(framecontent.doc umentelement. scrollheight, framecontent. Body. scrollheight );

If (bodyheight! = $. Getstyle (frame, "height ")){

$. Setstyle (frame, "height", bodyheight + "PX ");

}

}

If (FRAME ){

$. Setstyle (frame, "height", "Auto ");

Setinterval (resetiframe, 300 );

}

})();

Cross-Origin

Here we provide an IFRAME proxy method, which briefly describes the principle. Assume there are 3 webpages, respectively. a.html, B .html, and c.html. Where A and B are cross-domain, while A and C are in the same domain. Their relationship: A contains B, B contains C. Obviously, A and B, and B and C cannot communicate with each other because cross-domain communication, while A and C can communicate with each other in the same domain. For this reason, we want Page C to tell page a how high page B is. Ument. Body. scrollheight does not work, so we can only let page B calculate its own height, then tell Page C in some way, and then tell page A by Page C. One method here is to generate an IFRAME node on page B, set its src attribute, and add a parameter to this address, that is, the height calculated on page B, then the C page can be accessed through window. location obtains the address in the address bar, extracts the height value, and uses window. top find page A and set the IFRAME height of page. The basic principle is as follows:

 

Demo

 

 

// Page B script

// Task: calculate the actual height, generate an IFRAME node, and assign the height as part of the address of proxy Page C to the src attribute

(Function (){

VaR agent_iframe = Document. createelement ("iframe "),

B _height = math.max(document.doc umentelement. 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 ";

})();

 

// C page script

// Task: Get the height value in the request address and assign it to the IFRAME height of page

Optional topics top.doc ument. getelementbyid ("frame_content_parent"). Height = parseint (window. Location. Hash. substring (1), 10 );

Dynamic change of cross-origin and word page height

Here we combine the 2nd and 4th methods. My idea is to use a timer on page B to calculate the height of the page B without stopping. Once it changes, I will immediately modify the src attribute of the IFRAME label, on the C page, the timer constantly monitors SRC changes and changes the height of the aiframe tag. Note that you only need to modify the anchor value (such as "#1234") after the src attribute. The page will not be refreshed and will not be requested again. This is also the reason for adding a timer on Page C.

 

Demo

 

 

// Page B script

(Function (){

VaR getheight = function (){

Return math.max(document.doc umentelement. 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 );

})();

 

// C page script

(Function (){

VaR preheight = parseint (window. Location. Hash. substring (1), 10 ),

Ifrmae = maid top.doc ument. 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 is to re-request IFRAME every time, so that the timer is not required for the c page, but if the calculation height is repeated twice, as a result, the values of the src attribute are the same, so that the browser may not request the page again, and the script in the C page will not run. To fix this problem, you only need to add a random number parameter to the src attribute calculated each time. Like http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html? Temp = 123123423712937 #1563

 

 

// Key script on page B

Agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html? A = "+ math. Random () +" # "+ currentheight;

 

// C page script

Optional topics top.doc ument. getelementbyid ("frame_content_parent"). Height = parseint (window. Location. Hash. substring (1), 10 );