为了测试的方便，最好先设定host域名映射：
127.0.0.1 a.foo.com
127.0.0.1 b.foo.com
127.0.0.1 www.foo.com
127.0.0.1 www.bar.com
如果根域名相同，仅仅是子域名不同，则只要设定document.domain为根域名即可：
http://a.foo.com/main.html：
<html>
<head>
<title>main</title>
<script>
document.domain = "foo.com";
</script>
</head>
<body>
<iframe id="content" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="http://b.foo.com/content.html"></iframe>
</body>
</html>
http://b.foo.com/content.html：
<html>
<head>
<title>content</title>
<script>
document.domain = "foo.com";
window.onload = function() {
parent.document.getElementById("content").width = document.body.scrollWidth;
parent.document.getElementById("content").height = document.body.scrollHeight;
}
</script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
</html>
此时，浏览http://a.foo.com/main.html就能看到自适应大小的iframe效果了。
如果根域名不同，则需要通过代理页面的location.href传递变量：
http://www.foo.com/main.html：
<html>
<head>
<title>main</title>
</head>
<body>
<iframe id="content" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="http://www.bar.com/content.html"></iframe>
</body>
</html>
http://www.bar.com/content.html：
<html>
<head>
<title>content</title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<script type="text/javascript" src="http://www.bar.com/iframe.js"></script>
</body>
</html>
http://www.foo.com/proxy.html：
<html>
<head>
<title>proxy</title>
</head>
<body>
<script>
var query = location.search.substring(1).split("&");
for (var i = 0; i < query.length; i++) {
var param = query[i].split("=");
switch (param[0]) {
case "width":
parent.parent.document.getElementById("content").width = param[1];
break;
case "height":
parent.parent.document.getElementById("content").height = param[1];
break;
}
}
</script>
</body>
</html>
http://www.bar.com/iframe.js：
window.onload = function() {
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "http://www.foo.com/proxy.html?width=" + document.body.scrollWidth + "&" + "height=" + document.body.scrollHeight;
document.getElementsByTagName("body")[0].appendChild(iframe);
}
此时，浏览http://www.foo.com/main.html就能看到自适应大小的iframe效果了，其原理是因为子页面content.html把大小通过location.href的方式设定到代理页面proxy.html上面，而代理页面proxy.html和原页面main.html处在同一域名下，所以不存在javascript的跨域安全限制。需要注意的是，代理页面proxy.html的引入使用的是javascript脚本动态生成的方式。网上很多例子里在引入代理页面时，是采用的html硬编码iframe的方式，然后用javascript设定src，这样的方式是不好的，在firefox下，会让代理页面proxy.html加载两次。
参考链接：http://www.w3schools.com/TAGS/tag_iframe.asp
分享到：
相关推荐
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
本篇文章将深入探讨两个关键知识点：`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念，它限制了浏览器从一个源获取另一个源的资源，以保护用户的安全。当`iframe...
可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了
标题"iframe跨域高度自适应例子源码"指的是一个实例，展示了如何在跨域的情况下使`iframe`内容自动调整高度以适应其内部内容。这个例子提供了一个在线演示（http://okiner.cn/demo/cross-domain/iframe.html）以及源...
本文将详细介绍如何实现`iframe`跨域嵌套下的自适应高度调整，并讨论如何解决因跨域嵌套而可能引起的`session`丢失问题。 #### 一、`iframe`自适应高度原理与实现 1. **基本概念**： - **`iframe`**：`iframe`即...
当一个`iframe`加载的页面与包含它的页面不在同一个源下时，就会遇到跨域问题。为了解决这个问题，我们可以使用以下几种方法： - **CORS（Cross-Origin Resource Sharing）** 设置响应头`Access-Control-Allow-...
这种情况下，要想实现跨域iframe大小的自适应，需要采用一些特殊的策略。 解决方案的思路可以分解为以下步骤： 1. 假设有一个页面a.htm属于域A，它通过iframe嵌入了域B下的页面b.html。由于b.html的尺寸可能会变化...
总结来说，`iframe`跨域自适应高度模板主要是通过`CORS`解决跨域限制，通过JavaScript监听`load`事件或使用`postMessage`通信来实现内容高度的动态调整。这些技术在现代网页开发中十分常见，能帮助我们更灵活地整合...
2. 同源策略：由于跨域安全限制，只有同源的`iframe`才能访问其内容的高度，否则会出现安全错误。 3. 延迟加载：为了提高页面加载速度，可以考虑使用懒加载策略，即在`iframe`内容真正需要显示时再进行加载和高度...
此外，由于跨域安全限制，`<iframe>`内页面与父页面可能无法进行通信，这会影响高度自适应功能的实现。确保`<iframe>`加载的页面与包含它的页面位于相同的源（协议+域名+端口）下，或者`<iframe>`加载的页面明确通过...
本篇文章将深入探讨如何解决iframe跨域高度自适应的问题。 首先，我们需要理解为什么会出现跨域问题。根据浏览器的同源策略，一个网页只能访问与之同源（即协议、域名和端口完全相同）的资源。而跨域则意味着iframe...
www.baidu.com,假设地址：http://www.baidu.com/b.html 实现效果： A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小....
然而，由于`iframe`的大小固定，当嵌入的页面内容高度或宽度超过`iframe`设定的尺寸时，可能会出现滚动条或者内容被截断的情况。为了解决这个问题，我们需要让`iframe`根据其内容自动调整高度和宽度。本篇文章将详细...
但当IFrame加载的页面与包含它的页面不在同一域时，就会出现跨域情况，此时默认情况下无法直接获取或修改IFrame的内部信息，包括高度。 针对跨域IFrame高度自适应的问题，通常有两种方法： 1. 使用`postMessage` ...
"IFRAME自适应"是针对不同设备和屏幕尺寸，确保IFRAME内容能够自动调整其大小以适应页面布局的关键技术。在响应式设计中，IFRAME自适应尤其重要，因为它能让内容在手机、平板电脑和桌面电脑等不同设备上呈现良好的...
然而，当涉及到iframe的高度自适应时，如果子页面与父页面不在同一个域名下，就会出现JavaScript跨域问题，导致父页面无法直接获取子页面的高度信息。解决这个问题有多种策略，以下是一些常用的方法： 1. **...
- **跨域限制**：当`iframe`加载的内容与主页面不在同一域名下时，由于同源策略的限制，可能会出现安全问题，导致无法访问`iframe`内部的内容。 - **性能考虑**：频繁地调用`reinitIframe`函数会增加页面的负担，...
在同源情况下，可以使用以下JavaScript代码动态调整`iframe`高度： ```javascript function resizeIframe(iframeId) { var iframe = document.getElementById(iframeId); if (iframe && iframe.contentWindow && ...