1. 在项目中用到了iframe,但是iframe里面的内容并不能确定有多长.
如:你的iframe包含的页面里面有分页,平均每页10条记录,到最后一页的时候只有2条,
由于iframe在正常情况下是不能指定其高度为100%的,这时候应该怎么办呢?
告诉你,你现在再也不用为这个烦恼了,一句简单的javascript就帮你搞定这个问题.
例:
parent.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>iframeTest</title>
</head>
<body bgcolor="#FFFFCC">
<iframe name="iframeTest" src="iframe.html" ></iframe>
</body>
</html>
iframe.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>iframe</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- html内容 -->
<script>
parent.document.all.iframeTest.height = document.body.scrollHeight;
</script>
</body>
</html>
注意两个html中的粗体部分即可.
2.现在的问题是当frame2.htm显示的内容很长时,有些内容看不到;如何做到该网页随iframe中嵌入的网页内容长度自动出现滚动条,并且这滚动条不是出现在iframe中
<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><iframe frameborder=no
marginheight=0 marginwidth=0 name=schistory scrolling=no
src="frame2.htm" width=100%> </iframe></td>
</tr>
</table>
处理1：
你这个属于让iframe的子页面决定父页面的高度。
写javascript吧。
<script language="Javascript">
function window.onload()
{
parent.document.all("mainFrame").style.height=document.body.scrollHeight+670;
}
</script>
写在iframe调用的子页面里面
后面的670是父页面比子页面高的高度
<script language="javascript">
parent.document.getElementById(mainFrame).height = '200px';
</script>
直接设置页面大小。
3.如何动态控制IFrame的长和宽
主页面要放置一个IFrame用于嵌套显示子页面的信息，但是子页面的数据多少不一，导致子页面可能会很长或很短，要动态控制IFrame的高低随子页面的长短而变化。
主页面如下：
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY >
<TABLE>
<TR>
<TD>
<iframe id="frmTest" height="100px" name="frmTest" src="in.html"></iframe>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
子页面只需要做如下处理即可：
在页面的最下端添加如下JS脚本：
<script language=javascript>
window.parent.document.all("frmTest").style.height = document.body.scrollHeight + 10;
</script>
其中frmTest即为Main页面的IFrame的ID。
分享到：
相关推荐
这个库允许的高度与同跨域iframe来适应他们所...在iframe页面链接修复和支持iFrame与父页面之间的链接。 提供自定义的大小和滚动方法。 使家长地位和视口大小的iframe。 与ViewerJS支持PDF和ODF文档。 后备支持到IE8。
### iframe高度自适应技术详解 在网页开发过程中，经常会遇到需要在一个页面中嵌入另一个页面的需求，这通常通过HTML的`iframe`元素实现。然而，一个常见的问题是当嵌入的内容高度变化时，如何使`iframe`的高度能够...
这时可以利用`window.postMessage`进行父子窗口之间的通信，由子窗口（Iframe内的页面）发送其高度给父窗口，再由父窗口调整Iframe的高度。 子窗口（Iframe内容）： ```javascript window.parent.postMessage({...
EasyUI提供了一种方式，通过`parent`关键字来访问父窗口的对象，从而调用其上的函数。假设在父页面上有一个名为`updateParentData`的函数，可以在子页面中这样调用： ```javascript parent.updateParentData('子...
// 通知父窗口调整高度 window.parent.adjustIframeHeight(document.getElementById('example')); }; ``` ##### 方法三：使用第三方库 **优点**：简化了开发流程，提供了更多的功能。 **缺点**：可能会增加...
例如，通过`window.opener`对象，子窗口可以访问到打开它的父窗口，而`iframe`内的脚本可以通过`parent`对象与父页面通信。 - 父窗口调用子窗口： ```javascript let newWindow = window.open('...'); newWindow....
"iFrame高度自适应终极解决方案（兼容IE7,8,9 Firefox3.6+,Chrome 12+）"这个标题所指向的，就是一种跨浏览器的策略，确保iFrame内容无论何时更新，都能自动调整其高度，从而避免滚动条的出现和内容溢出。...
例如，假设有一个名为`leftFrame`的子窗口想要向名为`rightFrame`的父窗口发送消息： ```javascript // 在leftFrame中 window.parent.rightFrame.postMessage('这是从左窗体传来的信息', '*'); ``` 在`rightFrame`...
这段代码会在窗口大小改变时，使`iframe`的高度适应其内部内容的高度。 总结，理解和掌握`iframe`的跨域解决方案以及自适应策略，对于开发高效且用户体验良好的Web应用至关重要。在实际应用中，还需要注意安全性、...
在iOS中，当`iframe`内的子页面高度超过父页面时，若子页面触发弹框，弹框可能会出现在视口下方，因为它的位置是相对于子页面而不是视口进行定位。这在Android系统中通常不会发生，因此开发者需要采取特定的策略来...
在一些特殊情况下，我们需要让Iframe高度自动适应其中内容的大小。上面提供的文档内容，尽管通过OCR扫描技术出现了一些识别错误，但是核心的代码和思路是清晰的，能够帮助我们理解如何实现Iframe高度的自适应。 从...
在子页面中，从您的文档就绪函数或窗口加载函数调用 messageParent()。 messageParent 函数尝试使用 document.scrollHeight 来获取文档的高度，但这并不总是适用于每个人。 您可能只想使用 jquery 或其他选择器获取...
在本文中，我们将探讨如何在使用iframe嵌套页面时，从子页面（iframe内部页面）操作父页面（包含iframe的页面），以屏蔽整个父页面并弹出特定的层。这种技术尤其适用于需要在子页面加载时阻止用户与父页面互动，同时...
如果页面高度大于窗口高度，那么将IFrame高度设置为页面高度；否则，设置为窗口高度。 子页面中的jQuery代码如下： ```javascript $(function(){ var winH = $(window).height(); var bodyH = $(document)....
可以使用`window.postMessage` API进行跨窗口通信，使得父页面和子页面（实际是同一个页面的不同部分）可以安全地交换信息。 4. **SEO优化**： - 由于搜索引擎爬虫可能无法执行JavaScript，因此在设计时应考虑SEO...
总结来说，lhgDialog结合跨iframe框架使用，需要理解JavaScript的跨域通信机制，利用`window.postMessage`来传递对话框的配置信息，然后在子页面中监听并处理这些信息，从而实现在iframe内打开lhgDialog的功能。...
父窗口与子Iframe之间的交互通常涉及跨域问题，但当两者位于同一域名下时，可以通过`window.parent`和`window.frames`对象来实现通信。 示例代码： ```html <!-- example.htm --> (window.frames['tt'].document....
- `width` 和 `height`：设置 Iframe 的宽度和高度。 - `scrolling`：控制 Iframe 内部内容是否显示滚动条，默认为 `"auto"`，还可以设置为 `"yes"` 或 `"no"`。 - `frameborder`：控制 Iframe 边框的显示，值为 "0...
1. **跨域通信**：`iframe-resizer`利用`postMessage` API实现跨域通信，允许父页面和`iframe`之间安全地交换信息，如调整`iframe`尺寸的指令。 2. **动态大小调整**：当`iframe`内部内容发生变化，比如滚动、加载...
当子页面和父页面在同一域内时，可以使用JavaScript定时检测来获取并调整iframe高度。例如，可以创建一个函数`ChangeFrameHeight`，它通过定时器每隔一定时间（如2秒）检查子页面的高度，并相应地调整iframe的高度...