Js regarding automatic telescopic control iframe problem

sponsored links
Through Google search iframe highly adaptive, resulting in more than 5W, search iframe highly adaptive, resulting in more than 2W.
I turned in front of dozens of articles, many reprinted planing go, then there is the 35 are original. Several original inside which is basically only talked about how the adaptive static things is that they did not take into account the JS after the DOM operation, how to make dynamic synchronization problem. In addition, compatibility, but also studies not thorough enough.

This article, I hope in these two areas in depth to do something again.

May not come into contact with someone over this issue, first explain what you are highly adaptive. Iframe height of the so-called self-adaptive, that is, based on the appearance and interactive interface considerations, hidden iframe's border and the scrollbar, people do not see it is a iframe. If the iframe is always called with a fixed height of the page, we direct die iframe height Writing it. And if iframe To switch pages, or pages do contain dynamic DOM operation, this time on the necessary procedures to synchronize iframe be included height and actual height of the page.

Under way, iframe at compelling when it is to use, it will give front-end development brought about by too much trouble.

Traditional practices in general there are two:
Ways one, be included in each page to load the content at their own after the implementation of JS highly of this page, and then synchronize the parent page to iframe height.
Ways II, at page onload of iframe in case the implementation of JS, to be included to obtain the height of the content page, and then go high simultaneously.
At code maintenance point of view, methods are better than the method II one, because one method, each page must be included to the introduction of a section of code to do the same thing, create a lot of copies.

Only two ways to deal with a static thing, that is, only at a time when the content is loaded, if the JS go DOM operations caused by a high degree of change, are not too convenient.

If in the main window to do an Interval, non-stop to get a page that contains a high degree, and then sync to do, is not that convenient, but also solved the problem of the DOM operation JS the case? The answer is yes.

Demo page: Home Noodles iframe_a.html, be included iframe_b.htm and iframe_c.html page

Home noodle sample code:

<iframe src="iframe_b.html" scrolling="no" frameborder="0"> </ iframe>
<script type="text/javascript">
function reinitIframe () (
var iframe = document.getElementById ( "frame_content");
try (
iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
) catch (ex) ()
window.setInterval ( "reinitIframe ()", 200);
</ script> has been implemented, the efficiency would have a problem?
Me to do the test, five windows open simultaneously (IE6, IE7, FF, Opera, Safari) the implementation of the code, will not have any impact on the CPU, and even adjust to 2ms, did not affect the (basic maintained at 0% occupancy rate) .

Turning next to the browser compatibility issues, how to obtain the correct height, mainly for body.scrollHeight and documentElement.scrollHeight worth comparing the two. Attention to this article are used in the doctype, different doctype should not affect the results, but if your browser does not affirm the doctype, or go to add that one.

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd"> Noodles at home the following additional test code in order to output this two values, code examples:

<div> <button> Check Height </ button> </ div>
<script type="text/javascript">
function checkHeight () (
var iframe = document.getElementById ( "frame_content");
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
alert ( "bHeight:" + bHeight + ", dHeight:" + dHeight);
</ script> loaded page, you can switch an absolute positioning of layers, in order to make highly dynamic changes in the page. If the layer to start, it will hold a high page height. Sample code:

<button> Toggle Overlay </ button>
</ div>
<div> </ div>
</ div>
<script type="text/javascript">
function toggleOverlay () (
var overlay = document.getElementById ( 'overlay');
overlay.style.display = (overlay.style.display == 'none')? 'block': 'none';
</ script> The above code are listed below in the browser test values:
(BHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, red = error value, green = correct value)

/ Layer hidden layer, when
bHeight dHeight bHeight dHeight
IE6 184 184 184 303
IE7 184 184 184 303
FF 184 184 184 303
Opera 181 181 300 300
Safari 184 184 303 184

Opera for the time being ignore the less than others 3 pixel problem ... we can see that if things do not have absolute positioning, the two values are equal, check which are Do not care.
However, if there is, then the performance of each browser not the same as a single check which values are not right. But a law can be found, it is worth taking the maximum of two can be compatible with all browsers. U.S. page so the code will be transformed into the case:

function reinitIframe () (
var iframe = document.getElementById ( "frame_content");
try (
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max (bHeight, dHeight);
iframe.height = height;
) catch (ex) ()
window.setInterval ( "reinitIframe ()", 200); this way, basically solved the compatibility problem. Incidentally, the only absolute positioning of the layer will affect the value, float can also lead to differences between the two values.

Demo after demo if you are, you will find that, in addition to IE, other browsers, when started after the hidden layer, taking into account the high value is still maintained at the start of a high degree of 303, rather than go back and hide the true value of 184, that is a long high After the reduction does not go back. This phenomenon has been included in different switch between pages to do will happen, when a page from high to switch to short the page when taking into account the high or the high value.
Can be summed up as, when the iframe form high above the actual height of the document, when a high degree of access is a high form, and when the form height lower than the actual height of the document, the check is the actual height of the document. Therefore, finding ways to put before a high degree of synchronization at a high setting to a lower than the actual value of the document. Therefore, in the iframe Add onload = "this.height = 100", so that when the page is loaded first reduced to short enough, and then synchronized to the same height.
This value, decide in practical applications, short enough but not too short, otherwise, in FF and other browsers will be very obvious flicker. DOM when the page operation can not monitor that can only operate after the expiry of DOM put a high degree smaller.
At one of my actual project, in the trade-off between costs and benefits, I do not have to do this thing, because every DOM function must insert this code, the price is too high, in fact, go back Indent off layer would not be fatal . Including the Demo-ri, nor do such things. If readers have a better way, please tell me.

This is the final page of the code:

<iframe src = "iframe_b.html" scrolling = "no" frameborder = "0"
onload = "this.height = 100"> </ iframe>
<script type="text/javascript">
function reinitIframe () (
var iframe = document.getElementById ( "frame_content");
try (
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max (bHeight, dHeight);
iframe.height = height;
) catch (ex) ()
window.setInterval ( "reinitIframe ()", 200);
</ script> attached Demo page: Home Noodles iframe_a.html, was included in the page iframe_b.htm and iframe_c.html
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of Js regarding automatic telescopic control iframe problem

  • NoClassDefFoundError: javax / servlet / Servlet

    In the project in order to achieve a listener in web.xml set up a listener, did start in Tomcat actually occurred after java.lang.NoClassDefFoundError: javax / servlet / ServletContextListener this anomaly google and found the reasons for the lack of serv

  • Dynamic loading JS script four kinds of methods

    To achieve dynamic loading JS script has four kinds of methods: 1, direct document.write <script language="javascript"> document.write ( "<script src='test.js'> <\ / script>"); </ script> 2, dynamic scri

  • java read file

    java read documents in two ways: java.io and java.lang.ClassLoader When using the java.io, when java.lang.ClassLoader use it? (Note: If prior to read xml file java read file clearly aware of these two methods have been like! Can take much less to understa

  • Hibernate primary key strategy-sequence

    Today, the use of hibernate in the company encountered a troublesome problem, the use of hibernate when the primary key generation strategy set sequence, but always reported in the implementation could not get next sequence value of the error, then o ...

  • Hibernate pessimistic locking mechanism for locking and optimistic locking

    hibernate lock mechanism 1. Pessimistic lock It refers to the modification of data by outsiders hold a conservative attitude. The assumption that at any time access to data, may also have another client to access the same data, in order to maintain t ...

  • Nan-Jing 5: When IBatis.Hibernate mixed affairs, pay attention to your SQL

    [Problem] Now, in the development of the so-called multi-storey JavaEE applications, data persistence layer is always essential, and "Automatic" of ORM - Hibernate, and "all-manual-type" of SqlMap - IBatis, equivalent data are Per ...

  • hibernate to use the principle of

    The use of hibernate, implementation of data persistence. Has the following several processes. One configuration database connection information. Hibernate.config 2 configuration mapping. 3 use: the use of the process are the following steps: 3.1: Ge ...

  • Java technology: Eclipse explain the use of techniques

    Editor settings: Window -> Preferences -> Java-> Editor appearance: Display line number, emphasizing symmetry shown in square brackets, to emphasize that the existing line to show Print Margins its check, Tab width set 4, print made from the fiel

  • Based on JDBC, JPA Annotation achieve simple CRUD Generic Dao

    The origin of ideas are pretty long history of reasons: [Use iBATIS history] The use of iBATIS has been a long time, the system is to use the CRUD template tool to generate the code, although there are tools to generate, but looked at a lot of CRUD the Sq

  • Hibernate's lazy strategy

    hibernate Lazy strategy can be used in: <class> tag, it can be true / false Tags can <PROPERTY> values true / false type of necessary tools to enhance <set> <list> can tag values true / false / extra <many-to-one> <on ...

blog comments powered by Disqus
Recent Entries
Tag Cloud
Random Entries