Talk page layout in the iframe highly adaptive problem

sponsored links
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:

Talk page layout in the iframe highly adaptive problem


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 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 a ...

  • Add the onload event for the iframe, iframe highly adaptive problem.

    Father of the page onload: $ (Function () ( var f = window.frames ["formIframe"]; f.onload = function () ( var h = window.frames ["formIframe"]. document.body.scrollHeight; $ ('# FormIframe'). Css ('height', h +10); ) )

  • 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

  • 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 ...

  • jquery iframe highly adaptive

    Adaptive iframe height can be written under Ie <iframe name="listFrame11" width="100%" onload="this.height=(iFrame1.document.body.scrollHeight)+20;" frameborder="0"> </ iframe> But the recent discov

  • 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 highly adaptive

    <iframe width="100%" src="URL And the file must be in the same domain " onload="Javascr ī pt:setIframeHeight(this)" frameborder="0" scrolling="no" height="100%"> </iframe> <script> function setIframeHeight(iobj) { var win = iobj; if (doc

  • iframe highly adaptive (reproduction)

    Are hesitant, it was discovered the following code, and finally triumphant solution. Suffer from insufficient familiarity of the js code in the specific method parameters have to continue to learn, for providing the code of a friend. Cited

  • ie ff iframe highly adaptive and interoperability

    <script type="text/javascript" language="javascript"> <! - / / Adjust the height of PageContent function TuneHeight () ( var frm = document.getElementById ("FM_Content"); var subWeb = document.frames? document.f

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