iframe的高度一直是让人头疼的问题。今天因为有个项目需要用到。再把这个问题找了一遍,但是还是发现了FF不兼容的错误（提示错误：
document.frames is undefined）！
在这里我把这个问题彻底解决了。希望大家可以借鉴！
可以直接预览 （http://www.ok22.org/art_detail.aspx?id=122
）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)</title>
<style>
*{margin:0;padding:0;}
</style>
<script type="text/javascript">
function SetCwinHeight(obj)
{
var cwin=obj;
if (document.getElementById)
{
if (cwin && !window.opera)
{
if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
cwin.height = cwin.contentDocument.body.offsetHeight; //FF NS
else if(cwin.Document && cwin.Document.body.scrollHeight)
cwin.height = cwin.Document.body.scrollHeight;//IE
}
else
{
if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)
cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera
}
}
}
</script>
</head>
<body>
bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />
bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />bdaf<br />
<iframe src="http://www.iteye.com/" name="ifr4" id="ifr4" frameborder="0" height="100%" width="100%" onload ="SetCwinHeight(this)"></iframe>
</body>
</html>
分享到：
相关推荐
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。
"Iframe高度自适应（兼容IE/Firefox、同域/跨域）"这一主题是关于如何让内嵌在Iframe中的页面能够根据其内容动态调整自身的高度，确保在不同浏览器（如IE和Firefox）以及处理同域和跨域情况时都能正常显示。...
可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了
这段描述中提到的“完美自适应高度嵌套代码”很可能就是一个实现上述逻辑的JS代码片段，它可能包含了针对不同浏览器的兼容性处理，比如对于IE6-9这些老版本浏览器的特殊处理，因为它们对某些DOM操作和事件处理的支持...
总结来说，`iframe`跨域自适应高度模板主要是通过`CORS`解决跨域限制，通过JavaScript监听`load`事件或使用`postMessage`通信来实现内容高度的动态调整。这些技术在现代网页开发中十分常见，能帮助我们更灵活地整合...
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
接下来，我们可以利用JavaScript的DOM操作和事件监听来实现自适应高度的功能。以下是一个基本的实现步骤： 1. **获取`iframe`元素**：通过`document.getElementById`或`querySelector`方法找到页面上的`iframe`元素...
总的来说，这个例子通过`postMessage`实现了跨域`iframe`的高度自适应，使得`iframe`可以动态地根据其内容的高度进行调整，即使内容源与父页面不在同一域。这在处理第三方内容嵌入或者多个域间的交互时非常有用。...
本文将详细介绍如何实现`iframe`跨域嵌套下的自适应高度调整，并讨论如何解决因跨域嵌套而可能引起的`session`丢失问题。 #### 一、`iframe`自适应高度原理与实现 1. **基本概念**： - **`iframe`**：`iframe`即...
使用CSS Flexbox或Grid也可以实现自适应效果。在父容器上设置相应的样式，可以让Iframe自动填充可用空间。例如，使用Flexbox： ```html ;"> <iframe id="myIframe" src="http://example.com" style="flex: 1;">...
对于同域下的Iframe高度自适应，可以通过JavaScript来实现。这段代码首先获取id为"iframeid"的iframe元素，然后检查浏览器是否支持getElementById方法（这主要是为了兼容早期的IE浏览器）。如果支持，它将尝试获取...
总结，`iframe`高度自适应是前端开发中的常见问题，解决这个问题需要根据实际情况选择合适的方法，包括利用CSS、JavaScript、`window.postMessage` API，以及处理IE浏览器的兼容性问题。在实际操作中，一定要注意...
此外，由于跨域安全限制，`<iframe>`内页面与父页面可能无法进行通信，这会影响高度自适应功能的实现。确保`<iframe>`加载的页面与包含它的页面位于相同的源（协议+域名+端口）下，或者`<iframe>`加载的页面明确通过...
通过使用jQuery来实现iframe的高度自适应，我们可以确保内容在不同浏览器（包括IE、Firefox、Safari和Chrome）中的显示一致性，无论iframe内嵌的页面有多复杂。 首先，我们需要理解iframe的基本概念。IFrame，即...
本篇文章将深入探讨两个关键知识点：`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念，它限制了浏览器从一个源获取另一个源的资源，以保护用户的安全。当`iframe...
本文将详细讲解如何解决`iframe`跨域问题以及实现自动适应高度的功能。 1. **同源策略与iframe跨域** 同源策略是浏览器安全的一项基础机制，它限制了来自不同源的"文档"或脚本相互交互。当一个`iframe`加载的页面...
这样，两者就可以同步高度信息，实现自适应。 示例代码如下（假设iframe内页面已经设置为允许来自父页面的消息）： ```javascript // 父页面 function resizeIframe(iframe) { if (iframe.contentWindow) { ...
本项目提供了一个完整的、经过测试的解决方案，确保在IE6到IE8、Firefox 3.5、Opera以及Google Chrome等主要浏览器中，Iframe的内容能自动调整其高度以适应内部页面的大小。 1. **Iframe高度自适应原理** - 通常，...