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:

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)

分类:Web 时间:2009-04-03 人气:305
本文关键词:
分享到:
blog comments powered by Disqus

相关文章

  • Add the onload event for the iframe, iframe highly adaptive problem. 2010-06-03

    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); ) )); Looks like th

  • Iframe highly adaptive framework Infinite Father adaptive multi-frame 2010-04-14

    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 referen

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

    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 caused by

  • Talk page layout in the highly adaptive problem iframe 2010-03-12

    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 synchronize t

  • jquery iframe highly adaptive 2010-11-10

    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 discovery o

  • javascript iframe highly adaptive 2010-12-22

    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 2010-03-24

    <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&

  • iframe highly adaptive (reproduction) 2010-05-11

    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. function SetCwin

  • ie ff iframe highly adaptive and interoperability 2010-07-26

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

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

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

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

processed in 0.157 (s). 12 q(s)