iframe适应高度同步改变的问题？

rickyll 2009-04-17 05:36:48

我的问题是：
当test.aspx高度改变时，iframe高度同步改变，如何实现?

<iframe src="test.aspx" id="iframeId" onload='this.height=iframeId.document.body.scrollHeight' width="100%" scrolling="no" frameborder="0"></iframe >

...全文

199 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

rickyll 2009-04-21

打赏
举报

谢谢大家的热心帮助，我采用了“天行健” 的方案， winner的思路我没有测试，再次感谢

winner2050 2009-04-21

打赏
举报

这个问题在IE7,IE8 里面非常头疼。

像你的iframe 设置宽度为100%，内容页打开的时候iframe 宽度是0,asp.net 报错页面也会导致iframe宽度为0,内容页为非xhtml都会导致iframe宽度为0

高度容易点

function IframeHeight(iFrameid)
{
if(document.frames[iFrameid].closed==true)
{
return;
}
//手工刷新框架里面的网页会为null，网页加载完了以后事件又被触发，这时才能取到值
try
{
if(document.frames[iFrameid].document.body==null)
{
return;
}
}
catch(err)
{
return;
}
var h;

if(GetBrowser()=="IE")
{
h = document.frames[iFrameid].document.body.scrollHeight + 20;
}
else
{
h = document.frames[iFrameid].document.body.clientHeight + 20;
}

if(h<520)
{
h=520;
}

$(iFrameid).style.height = h;
$('TabPageContent').style.height = h;
}

根据自己的情况改改。

我姓区不姓区 2009-04-20

打赏
举报



<iframe width="100%" height="100px" noresize="noresize" frameborder="no" scrolling="auto"

            name="mainFrame" id="mainFrame"></iframe>

    <script type="text/javascript">

        function reinitIframe() {

            var iframe = document.getElementById("mainFrame");

            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>

试试，不过只可用于同域情况

zsuswy 2009-04-20

打赏
举报

响应页面的body的onresize事件，在onresize事件中，根据窗口的大小来指定frame的高和宽。这样肯定能解决你的问题。

cat_hsfz 2009-04-20

打赏
举报

如果是同域的页面，这可以做到；如果是跨域的页面，这就做不到了。

zucc_sjj 2009-04-20

打赏
举报

帮你up下

rickyll 2009-04-20

打赏
举报

[Quote=引用 6 楼 zzxap 的回复:]
去掉onload='this.height=iframeId.document.body.scrollHeight'

ps: onload='this.height=iframeId.document.body.scrollHeight' 是错误的写法
[/Quote]

写法是正常的，您可以调试一下

rickyll 2009-04-20

打赏
举报

[Quote=引用 5 楼 zzxap 的回复:]
不要指定高度，就会根据内容自动调整高度
[/Quote]

我经过测试，不指定高度，只出现了动条，并且不会自动调整高度的

zzxap 2009-04-20

打赏
举报

去掉onload='this.height=iframeId.document.body.scrollHeight'

ps: onload='this.height=iframeId.document.body.scrollHeight' 是错误的写法

zzxap 2009-04-20

打赏
举报

不要指定高度，就会根据内容自动调整高度

yooyoozoo 2009-04-20

打赏
举报

不知道学习中~！~！

顶一下~

rickyll 2009-04-20

打赏
举报

顶起

rickyll 2009-04-20

打赏
举报

顶起，谁解决再给100分

rickyll 2009-04-17

打赏
举报

代码如下：

test.aspx:



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="test2008.test" %>



<html>

<head runat="server">

    <title>test</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <script language="javascript" type="text/javascript">

                    function dv_Advanced()

                    {

                        if(document.getElementById("hd_Advanced").value == "1")

                        {

                            document.getElementById("dvAdvanced_complete").style.display="";

                            document.getElementById("hd_Advanced").value = "0";

                            

                        }else{

                            document.getElementById("dvAdvanced_complete").style.display="none";

                            document.getElementById("hd_Advanced").value = "1";

                        }

                    }

                </script>



                <input id="hd_Advanced" type="hidden" value="1" />

        <label onclick='dv_Advanced();' style='cursor:hand;font-size: 16px; color: Gray;margin-left:10px;'>

        >>>>点击我展开<<<<

        </label>

        <div id='dvAdvanced_complete' style='display:none;'>

            <table style="width: 100%; height:300px; background:Red;" border="4">

                <tr>

                    <td>

                         1

                    </td>

                    <td>

                         2

                    </td>

                    <td>

                         2

                    </td>

                </tr>

                <tr>

                    <td>

                         3

                    </td>

                    <td>

                         4

                    </td>

                    <td>

                         5

                    </td>

                </tr>

                <tr>

                    <td>

                         6

                    </td>

                    <td>

                         7

                    </td>

                    <td>

                         8

                    </td>

                </tr>

            </table>

                </div>

    </div>

    </form>

</body>

</html>

iframe.aspx



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="iframe.aspx.cs" Inherits="test2008.iframe" %>



<html>

<head runat="server">

    <title>test</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>



        <iframe src="test.aspx" id="iframeId" onload='this.height=iframeId.document.body.scrollHeight' width="100%" >

        </iframe>

    </div>

    </form>

</body>

</html>