iframe跨域的 高度自适应。
这里需要利用一个代理页面，稍微显得有点麻烦。不过目前也没发现更好的方法。
页面嵌套示意：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>main.html</title>
</head>
<body>
<h1>主页面开始</h1>
<div style="border:1px solid green">
<iframe id="iframeEl" frameborder="0" src="http://localhost/iframe/iframe.html"></iframe>
</div>
<h1>主页面结束</h1>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>iframe</title>
<script type="text/javascript" src="http://shawn.a.cn/iframe/autoHeight.js"></script>
</head>
<body>
<h1>iframe页面的开始</h1>
<div style="height:500px;background-color:gray;">
ssss
</div>
<h1>结束</h1>
</body>
</html>
//autoHeight.js
function sethash(){
var hashH = document.documentElement.scrollHeight;
var urlC = "http://shawn.a.cn/iframe/proxy.html";
var hidden = document.createElement("iframe");
hidden.style.display = "none";
hidden.src = urlC+"#"+hashH;
document.body.appendChild(hidden);
}
window.onload = sethash;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>proxy.html</title>
</head>
<body>
</body>
<script type="text/javascript">
var h = document.location.hash.substr(1);
var iframe = top.document.getElementById("iframeEl");
iframe.style.height = h + "px";
</script>
</html>
- 大小: 5.8 KB
分享到：
相关推荐
标题"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`在各种主流浏览器中都能正确地自适应内容高度，包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...
2. `order_list.html`: 这个文件很可能被用作iframe的源，即被嵌入到index.html中的页面，可能包含了一些需要自适应高度的内容。 3. `jquery-1.7.2.min.js`: 这是jQuery库的版本1.7.2的压缩版，它是实现iframe高度...
1. **同源策略与iframe跨域** 同源策略是浏览器安全的一项基础机制，它限制了来自不同源的"文档"或脚本相互交互。当一个`iframe`加载的页面与包含它的页面不在同一个源下时，就会遇到跨域问题。为了解决这个问题，...
Iframe框架高度自适应是一个重要的需求，特别是在内容动态更新或者跨域通信时，确保用户无需滚动两个独立的滚动条来查看全部内容。本篇文章将详细解释如何实现Iframe框架高度自适应，并分析给定代码的工作原理。 ...
当Iframe加载跨域内容时，安全限制可能会影响高度的动态调整。在这种情况下，可以使用HTML5的`sandbox`属性，配合`allow-scripts`允许Iframe内的脚本运行，以便计算高度。 5. **设定定时器**： 有些情况下，内容...
在某些情况下，如果`iframe`内容与主页面同源，可以使用CSS的`resize`属性来尝试让`iframe`自适应高度。但是，这种方法并不适用于跨域的情况。 2. **JavaScript/jQuery解决方案**： 对于跨域的`iframe`，可以采用...
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
总结来说，解决iframe跨域高度自适应问题的关键在于找到一种方式，无论子页面是否在同一域，都能让父页面获取到准确的高度信息。这可能需要结合JavaScript、HTML5特性、CSS布局或者服务器端的配合，具体选择哪种方法...
本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案，确保在各种主流浏览器中都能正常工作。 首先，理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性，用于指定要加载的...
通过以上步骤，`iframe-resizer`库能够确保`iframe`始终根据其内容自适应高度，无论内容是否跨域。 总结来说，实现`iframe`根据页面内容自适应高度和宽度，可以通过CSS、JavaScript以及第三方库如`iframe-resizer`...