0

我浏览了类似的帖子，但没有找到与我的场景真正相关的任何内容。

我有一个摘要页面，其中有iframe几个页面，用户在前往摘要页面的途中已经浏览了这些页面。在每个被 iframe 的页面中。我.toggle用来展开/折叠页面的内容。

我发现的问题是我在第一次加载摘要页面时使用了一个脚本来调整iframe它所包含的页面内容的大小，但是当我单击以切换该内容并折叠它时，它保持iframe相同的大小，因此有一大块空白。

我猜我需要将内容从包含的页面发送回摘要页面，说明内容大小已更改，因此重新调整大小，iframe但不确定如何执行此操作。

有人可以指出我正确的方向吗？

文件的一个例子是...

父.html

<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript">        
    // Resize an iframe so it's as tall as its contents. This could be much shorter but is expanded for clarity.
    function size_frame(frame_name, frame_id)
    {
       // Get the iframe element
       var frame_element = document.getElementById(frame_id);           
       // Get the iframe frame-window object. Note this has different properties to frame_element.
       var frame_window = frames[frame_name];           
       // Set the height to 1px first, because some browsers will give you the maximum height of either the
       // frame or its contents, when you try to read the scrollHeight property as we do below.
       frame_element.style.height = "1px";           
       // set the height of the iframe element to the "scrollHeight" of the document element of the frame window.
       frame_element.style.height = frame_window.document.documentElement.scrollHeight +"px";           
    }    
</script>
<h1>SUMMARY</h1>
<table border="0" cellspacing="0" cellpadding="0" width="850">
    <tr>
        <td><iframe src="child1.html" width="850" frameborder="0" scrolling="no" name="child1" id="child1" onload="size_frame('child1','child1');"></iframe></td>
    </tr>
</table>

儿童.html：

<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript">
    $().ready(function () {
        $('th[event-type-header]').bind('click', function () {
            var eventType = $(this).attr('event-type-header');
            $('tr[event-type="' + eventType + '"]').toggle('hide-event-type');
        });
    });
</script>
<h1>Child Page</h1>

<table width="800" border="0" cellspacing="0" cellpadding="0" class="content">
    <tr>
        <th class="content" event-type-header="childPage">
            Header <img src="arrow_down.gif" align="right" width="15" />
        </th>
    </tr>
    <tr class="content2" event-type="childPage">
        <td align="center">
            <table width="750" cellpadding="0" cellspacing="0" class="content">
                <tr>                        
                    <th class="content" colspan="2">Sub Heading</th>
                </tr>
                <tr class="content2">
                    <td>
                        Some Text           
                    </td>
                </tr>                           
            </table>
        </td>
    </tr>
</table>

4

1 回答 1

0

您需要使用 offsetHeight，而不是 scrollHeight。

于 2014-03-12T20:52:19.603 回答