跨域 iframe 高度操作答案

【问题标题】：Cross Domain Iframe height manipulation跨域 iframe 高度操作
【发布时间】：2013-04-02 20:53:44
【问题描述】：

我的问题：

我有一个链接到各种外部网站的 iframe。

我根本无法访问外部网站！

我想要实现的是将我的 iframe 与实际网站的 100% 高度/宽度嵌套到一个固定大小的 div 中，这样我就可以在这个 div 上应用自定义滚动条。

到目前为止，我有以下标记：

<div class="Content" style="margin: 0; padding: 0; height: 500px; width: 500px; overflow: auto;">
   <iframe id="mainframe" name="mainframe" src="http://www.fisk.dk" style="height: 100%; width: 100%;">
   </iframe>
</div>

正如预期的那样，100% 的 iframe 高度和宽度将转换为 500px 的父 div 高度和宽度。

我在过去 3 个小时里搜索了谷歌，试图弄清楚如何通过使用纯 css 或 css 和 javascript 来实现这一点，但没有任何结果。

无效的结果：

Porthole - 需要访问外部网站。
EasyXDM - 需要访问外部网站。
访问 document.getElementById('the_iframe').contentWindow 也不起作用 - 出现访问被拒绝错误。

感谢任何提示！

【问题讨论】：

查看my solution，希望对您有所帮助

标签： javascript cross-domain

【解决方案1】：

在使用 EasyXDM 和 PostMessage 之前，我已经完全按照您的描述进行了操作。如您所述，需要访问外部网站。您需要一些在外部站点的域上运行的 JavaScript 代码。

浏览器不允许您网站上的 JavaScript 或 CSS 代码访问其他网站的 DOM，因此无法知道其他网站页面的高度。

【讨论】：