转自网络：
首先，我的页面a.html需要引入对方的b.html,在这里运用iframe方式实现页面的套用 a.html页面的主要代码如下：
<BODY> <iframe width="100%" id="a_iframe" name="a_iframe" src="http://对方域名/b.html" frameborder="no" border="0px" scrolling="no" allowtransparency="yes" ></iframe> </BODY>
a.html页面只是用来引入对方页面的一个简单页面 这就不多做介绍。 然后，最好在a.html同一级目录下，创建一个agent.html页面，该页面用来得到对方通过js传递过来的参数， 根据高度参数来调整a.html中的a_iframe的高度，主要代码如下：
<script type="text/javascript"> //得到a.html中的a_iframe var a_iframe = parent.parent.document.getElementById("a_iframe"); //<SPAN>location.hash用来获取页面的标签值</SPAN> ，这个值通过b.html中的js函数改变。包括height属性 var hash_url = window.location.hash; //得到b.html传递过来的height属性 var hash_height = hash_url.split("#")[1]+"px"; //调整a_iframe的height，达到自适应 a_iframe.height = hash_height; </script>
最后，对方的页面(b.html),让对方在b.html中加入以下javascript代码
，代码如下(
注意：代码放在页面的最下面)：
<iframe id="b_iframe" width="100%" src="http://我的域名/../agent.html" style="display:none"> </iframe> <script type="text/javascript"> var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight); var b_iframe = document.getElementById("b_iframe");
b_iframe.src = b_frame.src+"#"+b_height; </script>
通过 Math.max(clientHeight,scrollHeight)比较网页可见区域高,网页正文全文高这两者得到其中的较大的值后， iframe将这个height通过src传递到我的agent.html,这样a.html中的Iframe就能自适应对方的b.html高度了。
分享到：
相关推荐
标题"iframe跨域高度自适应例子源码"指的是一个实例，展示了如何在跨域的情况下使`iframe`内容自动调整高度以适应其内部内容。这个例子提供了一个在线演示（http://okiner.cn/demo/cross-domain/iframe.html）以及源...
### iframe跨域嵌套自适应高度 在网页开发过程中，`iframe`作为一种常见的网页元素，被广泛用于在当前页面中嵌入另一个独立的文档或页面。然而，在实际应用中经常会遇到一些问题，如跨域限制、自适应高度调整以及...
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。
本篇文章将深入探讨如何解决iframe跨域高度自适应的问题。 首先，我们需要理解为什么会出现跨域问题。根据浏览器的同源策略，一个网页只能访问与之同源（即协议、域名和端口完全相同）的资源。而跨域则意味着iframe...
本文将深入探讨如何实现IFrame跨域高度自适应的解决方案。 首先，我们需要了解什么是跨域。在Web安全策略中，浏览器执行同源策略，这意味着一个网页只能访问与之同源（协议、域名、端口相同）的IFrame内容。但当...
总结来说，`iframe`跨域自适应高度模板主要是通过`CORS`解决跨域限制，通过JavaScript监听`load`事件或使用`postMessage`通信来实现内容高度的动态调整。这些技术在现代网页开发中十分常见，能帮助我们更灵活地整合...
可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了
此外，由于跨域安全限制，`<iframe>`内页面与父页面可能无法进行通信，这会影响高度自适应功能的实现。确保`<iframe>`加载的页面与包含它的页面位于相同的源（协议+域名+端口）下，或者`<iframe>`加载的页面明确通过...
本篇文章将深入探讨两个关键知识点：`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念，它限制了浏览器从一个源获取另一个源的资源，以保护用户的安全。当`iframe...
Iframe框架高度自适应是一个重要的需求，特别是在内容动态更新或者跨域通信时，确保用户无需滚动两个独立的滚动条来查看全部内容。本篇文章将详细解释如何实现Iframe框架高度自适应，并分析给定代码的工作原理。 ...
2. 同源策略：由于跨域安全限制，只有同源的`iframe`才能访问其内容的高度，否则会出现安全错误。 3. 延迟加载：为了提高页面加载速度，可以考虑使用懒加载策略，即在`iframe`内容真正需要显示时再进行加载和高度...
1. **同源策略与iframe跨域** 同源策略是浏览器安全的一项基础机制，它限制了来自不同源的"文档"或脚本相互交互。当一个`iframe`加载的页面与包含它的页面不在同一个源下时，就会遇到跨域问题。为了解决这个问题，...
通过使用jQuery来实现iframe的高度自适应，我们可以确保内容在不同浏览器（包括IE、Firefox、Safari和Chrome）中的显示一致性，无论iframe内嵌的页面有多复杂。 首先，我们需要理解iframe的基本概念。IFrame，即...
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
然而，当Iframe的内容动态变化或者内容长度超过预设的高度时，我们就需要实现高度自适应。有几种常见的方法可以实现这一目标： 1. **JavaScript/jQuery**： 一种常见的方法是使用JavaScript或jQuery监听页面的...
对于跨域的`iframe`，可以采用定时器和`window.postMessage` API来实现高度自适应。在`iframe`的父页面上，我们可以监听`message`事件，然后根据接收到的消息调整`iframe`的高度。在`iframe`内部，加载完成之后，...
本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案，确保在各种主流浏览器中都能正常工作。 首先，理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性，用于指定要加载的...
1. **CSS属性**：`iframe`的`style`属性可以设置`height`和`width`为`auto`或`100%`，但这种方法通常不足以实现完全自适应，因为浏览器的安全策略会限制跨域访问内容的高度和宽度信息。 2. **JavaScript**：使用...