Talk page layout in the iframe highly adaptive problem

Apr 3 posted in Web (RSS), comments.

Advertisements

We usually do when the site layout, often used in the layout iframe frame, iframe's height and are often being surrounded by the page height, as this will affect the page appearance. At this time, we need procedures to synchronize iframe height and be included in the actual height of the page.

Here to sum up the practice:

 The following is a declaration of the iframe  :
<div><iframe src="main.aspx" width="100%" name="main" scrolling="no" frameborder="0" onload="Javascript:SetIframeHeight()"  ></iframe></div>
 
 Gets the height of the iframe  : var bodyHeight=iframe.contentWindow.document.body.scrollHeight;
 Gets the height of the besieged page  : var elementHeight=iframe.contentWindow.document.documentElement.scrollHeight;

In IE6 the height of the output:

In IE8 the output 2 Height:

In FireFox 3.5.3 under Output 2 Height:

Can be seen under a different browser to obtain the height value is not the same, including in IE6, IE7 will be obtained under a slight difference in height values, but the overall results of testing is the height of the page surrounded by a high degree of value than the iframe large, heard of Safari web browser to test the height of the page when surrounded by a high degree of value than the iframe small. At this time the height of the two should be resolved according to several mainstream browser compatibility problems, the main code is as follows:

function SetIframeHeight()
 {
     var iframe=document.getElementById("main");
     
     try
     {
        var bodyHeight=iframe.contentWindow.document.body.scrollHeight;
        var elementHeight=iframe.contentWindow.document.documentElement.scrollHeight;
        //alert("inframe The height of the  :"+bodyHeight+",  Surrounded the height of the page  :"+elementHeight);    
        var height=Math.max(bodyHeight,elementHeight);
        iframe.height=height;    
     }
     catch(ex)
     {
        
     }
     window.setInterval("SetIframeHeight",300);// The main settlement is the page you want to do dynamic manipulation of DOM  , There are potential performance impact  
 }

However, if the iframe height to set their own large, than to be surrounded by the height of the page to be large, then the following page will still appear blank, so as far as possible when you set the iframe height to set smaller. But I feel that is compatible with the mainstream of the major browsers can be, that is written in the following:

 function SetIframeHeight()   // In my computer and Classmate PC IE 6.0 IE 8.0 under test via Firefox 3.5.3 protected access  , Don't know what other people can not test  
 {
     var iframe=document.getElementById("main");
     
     try
     {
         iframe.contentWindow.document.documentElement.scrollHeight; 
     }
     catch(ex)
     {
        
     }
     window.setInterval("SetIframeHeight",300);// The main settlement is the page you want to do dynamic manipulation of DOM  , There are potential performance impact  
 }

But I think people who write their own to weigh it, He He

Online there is a common practice:

<script language="javascript"> 
// Enter the height of the page you want to automatically adjust the height of the iframe is the name of the list   
// Use a comma to the each iframe  ID Separated. For example,  : ["myframe1", "myframe2"], You can have only one form, you do not have a comma  . 
// Define the iframe  ID 
var iframeids=["test"]; 
// If the user's browser does not support iframe whether  iframe Hidden yes indicates that hidden  ,no That does not hide   
var iframehide="yes"; 
function dyniframesize() 
{ 
var dyniframe=new Array() 
for (i=0; i<iframeids.length; i++) 
{ 
if (document.getElementById) 
{ 
// Automatically adjust the height of the iframe   
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); 
if (dyniframe[i] && !window.opera) 
{ 
dyniframe[i].style.display="block"; 
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) // If the user's browser is  NetScape 
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; 
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) // If the user's browser is  IE 
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; 
} 
} 
// According to the set of parameters to handle does not support iframe browser display problems   
if ((document.all || document.getElementById) && iframehide=="no") 
{ 
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]); 
tempobj.style.display="block"; 
} 
} 
} 
if (window.addEventListener) 
window.addEventListener("load", dyniframesize, false); 
else if (window.attachEvent) 
window.attachEvent("onload", dyniframesize); 
else 
window.onload=dyniframesize; 
</script>

Principle is to continuously scan the page in the iframe where the iframe that contains the contents of the document and change the iframe height of its height, I do not know the speed and system resources on the page would affect occupancy.

If you want to do a variety of browsers are compatible with a bit more difficult, what masters are there any other good method? Can solve the IE6, IE7, IE8, Firefox, Opera and other browser compatibility issues under.

(Transfer from: http://www.cnblogs.com/liguangxi8/archive/2010/01/02/1637984.html)