0
我浏览过类似的帖子,但没有发现与我的场景真正相关的任何内容。在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>
请包括一些代码,使您的问题更清晰。 – 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