跨域iframe高度自适应解决方案详析 - CSDN文库

需积分: 40 27 浏览量更新于2024-09-11 1 收藏 5KB TXT 举报

"在前端开发中，经常遇到的问题之一是跨域IFrame的高度自适应问题。由于浏览器的同源策略限制，来自不同域的IFrame无法直接获取其内部文档的高度，这在实现动态内容同步或者高度调整时造成了困扰。本文将介绍一种方法来解决这一问题。首先，我们需要理解跨域IFrame的原理。浏览器的安全策略（同源策略）限制了来自不同域名的脚本与父页面之间交互的能力。当我们尝试从一个页面中的IFrame访问另一个域的内容时，可能会遇到`document.contentDocument`或`parent.document`返回`undefined`的情况。为了解决这个问题，一种常见的做法是利用`document.domain`属性。在IFrame的父页面中设置`document.domain`为IFrame源域的顶级域名，可以帮助跨域通信。在给出的代码示例中： ```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> ``` 然后，在IFrame的源页面中，我们可以定义一个函数`calcPageHeight(doc)`，用于计算IFrame内容区域的高度。这个函数通过比较`body.clientHeight`和`documentElement.clientHeight`，以及`body.scrollHeight`和`documentElement.scrollHeight`来获取最大的高度值，确保高度计算准确。在`window.onload`事件中，我们调用`calcPageHeight`函数并获取到IFrame的实际高度，然后可以动态调整IFrame的样式，如设置其`style.height`属性，使IFrame的高度与内容自适应。例如： ```javascript window.onload = function() { var height = calcPageHeight(document); // 更新IFrame的高度 document.getElementById('ifr').style.height = height + 'px'; }; ``` 这种方法虽然解决了跨域IFrame高度自适应的问题，但需要注意的是，不是所有情况下都能立即生效，特别是对于一些动态加载的内容，可能需要额外的处理。此外，频繁改变`document.domain`可能会带来其他安全风险，因此在实际应用中应谨慎使用，并根据具体需求选择合适的方法。解决跨域IFrame的高度自适应是一个前端开发者必备的技能，通过合理的代码组织和巧妙的JavaScript逻辑，可以在遵循浏览器安全策略的前提下实现IFrame内容的高度动态适应，提升用户体验。"

跨域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>

剩余6页未读，继续阅读

Y丶小贱

粉丝: 2
资源: 30

最新资源