在iframed頁面上重新調整iframe大小ontoggle

我瀏覽過類似的帖子，但沒有發現與我的場景真正相關的任何內容。在iframed頁面上重新調整iframe大小ontoggle

我有一個摘要頁面，其中我iframe用戶瀏覽到摘要頁面的幾頁。在每個正在進行iframed的頁面中。我正在使用.toggle來展開/摺疊頁面的內容。

我發現的問題是，我在第一次加載時使用摘要頁面上的腳本來使iframe包含的頁面內容的大小，但是當我點擊切換內容並將其摺疊，它會將iframe保留爲相同大小，以便存在大量空白。

我猜我需要從包含頁面發回一些內容到說明內容大小已更改的摘要頁面，因此重新調整iframe大小的大小，但我不確定如何執行此操作。

有人可以請指出我在正確的方向嗎？

文件的一個例子是...

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

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

來源

2013-04-09 CPB07

請包括一些代碼，使您的問題更清晰。 – Boaz 2013-04-09 10:56:26

只需在調整iframe大小的父窗口實例中調用一個函數...？ – CBroe 2013-04-09 11:35:29

此問題困擾了很多人，但有一個解決方法： http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content – 2013-04-09 13:54:28

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

來源

2014-03-12 20:52:19

在iframed頁面上重新調整iframe大小ontoggle

回答

相關問題