跨域IFRAME自适应高度

[ 2014-11-16 ] [ 回到首页 ]

需求：A 页面使用 iframe 标签跨域包含B页面

问题：A、B 页面不同域，A 页面无法获取并自适应 B 页面高度

方案：增加 C 页面，A、C 页面同域，A 包含 B，B 包含 C，B 通知 C 高度，C 调整 A 页面 iframe 高度

---

---

A 页面：

<iframe id="iframe_a" src="B页面url" width="100%" style="border:0"></iframe>

---

B 页面：

<div style="background:#9AC86C;height:1000px"></div>
<iframe id="iframe_b" src="C页面url" style="display:none"></iframe>

---

C 页面：

<script>
    // 获取 B 页面高度
    var height_b = window.location.hash.split('#')[1] + 'px';
    // 获取 A 页面 iframe 对象
    var iframe_a = parent.parent.document.getElementById('iframe_a');
    // 调整 A 页面 iframe 高度
    iframe_a.height = height_b;
</script>