Js regarding automatic telescopic control iframe problem

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

分类:AJAX 时间:2009-04-04 人气:683
blog comments powered by Disqus


  • Best Ways Google Adsense Work 2010-11-25

    If you are not familiar with Google Adsense you should consider looking into the many features that it offers. Google Adsense is relatively new to the internet world, but it has proven to be a very effective tool that may even be able to make you som

  • AJAX implementation with a simple google analog input automatically 2010-12-30

    Relatively simple simulation, the text box to enter the CompanyName, and then search SqlServer2000 Suppliers table in the NorthWind database CompanyName field And then automatically complete the Four documents <!DOCTYPE html PUBLIC "-//W3C//DTD XH

  • Google registered www.baidu.com.sb of view 2010-05-10

    Incident as follows links: http://tech.qq.com/a/20100510/000130.htm About to get up early, www.baidu.com.tw to Google network, may not be his own to Google! As the incident is true, google is not evil their culture is contrary!

  • Implementation of the interface on JavaScript Interface Exploration 2010-10-31

    A few days ago spent some time reading the master js js written by Ross and Dustin design patterns, is indeed a good book, ah, there's something in a very deep, for the js java programming model simulation is very instructive, for the solution of

  • Google Pinyin for the increase in natural input code word auxiliary code 2010-10-16

    Google Pinyin a natural code of encoding scheme, but there is no natural input auxiliary code word code function. Although the sentence input is fast but the word for the name, input efficiency is not high. Google Pinyin use a custom function to defi

  • Google Earth 4.3版发布:Street View.改进Mac支持.新语言等(已更新下载.截图) 2014-12-05

      Google终于发布了旗下主打地图软件Google Earth的最新版本,4.3版。这个新版最大的变化除了正式加上了此前传闻中的Street View街道实景模式外,还对浏览系统进行改革、增加了日光模式及支持了12种新语言等,变化巨大。如果你是Mac用户,还有个更好的消息,那便是Google Earth 4.3终于也支持了Mac下的Flash了。   具体的更新如下: *正式加上了Street View模式 这使得Google Earth与Google Maps一样,都拥有了街道实景模式。这

  • [Reprinted] WordPress plugins implementation principle 2010-09-19

    http://www.efish.tk/wordpress-plugins.html Has been the software components, plug-in architecture is very interesting, I think that developing any application, must have a good plug-in system architecture, this can attract other people to develop plug-ins

  • In-depth understanding of Magento - Chapter II - Magento request distribution and control 2010-09-07

    In-depth understanding of Magento Of: Alan Storm Translation: Hailong Zhang Chapter II - Magento request distribution and control Model-View-Controller (MVC), Model - View - Controller, from Smalltalk programming language and Xerox Parc. There are ma

  • FileUpload上传图片前实现图片预览功能(附演示动画) 2014-04-13

    FileUpload控件上传图片前实现预览,很多网友都希望实现这样的功能,本人总结了一下,感兴趣的朋友可以参考一下,希望对您有帮助 看看效果: 在专案中,创建aspx页面,拉上FileUpload控件一个Image,将用来预览上传时的图片。 View Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE htm

  • WebService implementation of several different ways 2009-04-09

    server 01:ejb07 // Custom Interface public interface EjbWebService { public void addUser(String x); } // Defined to achieve import javax.ejb.Stateless; import javax.jws.WebMethod; import javax.jws.WebService; @Stateless @WebService// This is a WebSer

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.235 (s). 14 q(s)