"这篇文章主要探讨了如何完美地解决在跨域和子域环境下,iframe高度自适应的问题。通过具体的代码示例和方法介绍,旨在帮助开发者实现动态调整iframe内容区域的高度,确保页面布局的流畅性。" 在网页开发中,iframe(内联框架)是一种非常实用的元素,它允许我们将一个网页嵌入到另一个网页中。然而,当涉及到跨域或者跨子域的iframe时,由于同源策略的限制,浏览器会阻止页面之间直接进行某些交互,其中包括获取iframe内容的尺寸信息,这给实现iframe的高度自适应带来了挑战。本文将详细介绍两种解决这个问题的方法。 1. 使用`iframe.contentDocument`或`document.parentWindow`: 在同源策略允许的情况下,可以通过`iframe.contentDocument`或`window.parent`来访问和操作嵌入的页面。例如,获取iframe内容的文档对象模型(DOM),然后计算其高度。但当iframe与包含页面不在同一域下时,这种方式将返回`null`或`undefined`。因此,为了解决跨域问题,我们需要采用其他策略。 2. 设置`document.domain`属性: 当两个页面的域名共享相同的顶级域名时,可以设置`document.domain`属性,使其保持一致,从而解除同源策略的限制。如在1.html和2.html(分别位于a.jd.com和b.jd.com下)中,都设置`document.domain = 'jd.com'`,这样它们就共享了同一个域,可以互相访问对方的DOM。 示例代码如下: ```html <!-- 1.html --> <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>1.html</title> <script type="text/javascript"> document.domain = 'jd.com'; </script> </head> <body> <iframe id="ifr" src="b.jd.com/4.html" frameborder="0" width="100%"></iframe> </body> </html> <!-- 2.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2.html</title> <script type="text/javascript"> document.domain = 'jd.com'; </script> </head> <body> <p>一个跨域的iframe内容:3.html</p> <!-- 内容区 --> <script> // 页面加载完成后,计算并设置iframe高度 window.onload = function() { var height = calcPageHeight(document); // 调整iframe高度 parent.document.getElementById('ifr').style.height = height + 'px'; }; // 计算页面高度 function calcPageHeight(doc) { var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight); var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight); return Math.max(cHeight, sHeight); } </script> </body> </html> ``` 在上述代码中,2.html(被嵌入的页面)设置了`document.domain`为'jd.com',然后通过`window.onload`事件,调用`calcPageHeight`函数计算页面实际高度,并将高度传递给父页面,由父页面动态调整iframe的高度。这样,即使内容区域高度发生变化,iframe也能自动适配,保持页面布局的完整性。 总结来说,解决跨域iframe高度自适应的问题,关键在于打破同源策略的限制,通过设置`document.domain`实现页面间的通信。同时,结合JavaScript监听页面加载事件和计算页面高度的函数,可以实现动态调整iframe的高度,确保用户在浏览过程中获得良好的视觉体验。
跨子域的iframe高度自适应
完全跨域的iframe高度自适应
同域的我们可以轻松的做到
1. 父页面通过iframe的contentDocument或document属性访问到文档对象,进而可以取得页面的高度,通过此高度值赋值给iframe tag。
2. 子页面可以通过parent访问到父页面里引入的iframe tag,进而设置其高度。
但跨域的情况则不允许对子页面或父页面的文档进行访问(返回undefined),所以我们要做的就是打通或间接打通这个壁垒。
一、跨子域的iframe高度自适应
比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html',这种跨子域的页面
3.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>1.html</title>
<script type="text/javascript">
document.domain = 'jd.com'
</script>
<body>
<iframe id="ifr" src="b.jd.com/4.html" frameborder="0" width="100%"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2.html</title>
<script type="text/javascript">
document.domain = 'jd.com'
</script>
</head>
<body>
<p>这是一个ifrmae,嵌入在3.html里 </p>
<p>根据自身内容调整高度</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<script>
// 计算页面的实际高度,iframe自适应会用到
function calcPageHeight(doc) {
var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
var height = Math.max(cHeight, sHeight)
return height
}
window.onload = function() {
var height = calcPageHeight(document)
parent.document.getElementById('ifr').style.height = height + 'px'
}
剩余6页未读,继续阅读
- 粉丝: 53
- 资源: 139
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展