IFRAME automatic cross-origin height adaptation

 

Google search ifram automatically adapts to the height, with more than results, turning over more than a dozen pages to explore a large number of reprints, so there are three or five original articles. In these original articles, we basically only talk about how to adapt to the static state, that is, how to perform dynamic synchronization without considering how to perform dynamic synchronization after JS operations on Dom. In addition, the compatibility is not thorough. You can try to write it.

Okay. Let's just move on to the topic. to make it automatically adapt to the height, it is the most important thing to get the height of the content in ifram. With this height problem, we can solve the problem by loading the ifram page every time. to the parent page, the parent page assigns a value to the height of the fram tag by obtaining the height of the Child page.

Let's take a look at the specific implementation:

1. calculate the height of the content (subpage). Use jquey to obtain the actual height of the content of the subpage. The Div or form can specify an ID, for example, id = content. Then, calculate its offsetheight (actual height) through the ATTR attribute of jquery );

VaR cheight = $ ("# Content"). ATTR ('offsetheight ');

No matter whether you are using a list with pagination or static fetch height, it is certainly OK.

2. Call the parent. setframheight (cheight) function of the parent form (Child page). Do not forget to use parent to call the parent page on the Child page.

3. The parent page uses jquery to assign a value to the height of the mainframe tag.

Function setframheight (value ){
Vertex (includomainframework).css ("height", value );
}

Note:
1. Use. ATTR ('offsetheight'); do not use a style floating to calculate the actual height. Otherwise, the height calculated by him will be 0 or the auto solution will clear the floating.

2. For security reasons, JavaScript does not allow cross-origin calls to objects on other pages. Of course, the online processing method is also a document. domain. Prerequisites: The two pages belong to the same basic domain (for example, xxx.com or xxx.com.cn), the same protocol (for example, HTTP), and the same port (for example, 80 ). Method: Set the document. domain of both pages to the basic domain name of the user. Example: If an object in bbb.xxx.com needs to be called on a page in aaa.xxx.com, set the document. domain of both pages to xxx.com.

Original http://www.cnblogs.com/keboo/archive/2010/03/16/1687531.html