Talk page layout in the iframe highly adaptive problem

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:

Talk page layout in the iframe highly adaptive problem

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)
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb
Tags:

Related Posts of Talk page layout in the iframe highly adaptive problem

  • Talk page layout in the highly adaptive problem iframe

    We usually do website layout in time, often used in the framework of the layout iframe, iframe's height and often were surrounded by a high degree of different page, this will affect the page appearance. This time, we need procedures to synchroni ...

  • Iframe highly adaptive framework Infinite Father adaptive multi-frame

    Problem Description <br /> today highly adaptive in dealing with a Iframe Iframe having a multi-reference to the height of the problem can not distracting, effective with the Demo1. Analysis <br /> The problem is caused by the order of re ...

  • iframe highly adaptive, infinite-level parent frame, multi-layer framework for adaptive

    Description of the problem today <br /> highly adaptive in dealing with an Iframe Iframe encountered references to a multi-storey height of the problem is not distraction, the effect is the same Demo1. Analysis <br /> The problem is cause

  • Transfer, archiving, highly adaptive by jq achieve iframe

    Very happy, finally achieved using jquery click on external links, change the iframe content, iframe highly adaptive problem. Failed the test did not say, to direct. Two links and the iframe: Java code <li> <a href="selfinfo.jsp" t ...

  • About js control automatic telescopic iframe problem

    http://blog.csdn.net/teachy521/archive/2008/12/02/3429102.aspx 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 ...

  • Js regarding automatic telescopic control iframe problem

    http://blog.csdn.net/teachy521/archive/2008/12/02/3429102.aspx 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 ...

  • Iframe framework to achieve a high degree of adaptive

    Iframe highly adaptive framework to solve the problem page, the code below, reference should be noted that the framework must set the name properties page, otherwise it will not take effect Option One: <iframe src="test.asp" width="

  • div highly adaptive outer door evil ways

    1, raises the question: Highly adaptive to see information on the div, say by 100% can not be successfully resolved, I tried, it is. 2, solution: We want, Web page layout If it is, very few will use 100%, generally set high, We are talking about here

  • javascript iframe highly adaptive

    Question: When uploading images to the local refresh the page put a iframe, as content is changed inside the iframe needs to automatically adapt to the height of the outer layer, iframe is not property, can only be controlled through the js in the in

  • iframe FAQ Collection (continuously updated)

    1.iframe syntax format: Must not be written: Html page that would undermine the structure of unexpected results occurred 2. No Border effect: Or 3. Highly adaptive: Method 1 (simple): Method 2 (more common): 4.iframe tab page that contains the iframe ...

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries