使用我无法控制的 src 调整 HTML Iframe 的大小答案

【问题标题】：Resizing HTML Iframe using a src I can't control使用我无法控制的 src 调整 HTML Iframe 的大小
【发布时间】：2013-12-03 20:33:38
【问题描述】：

我正在开发一个应用程序，它提供一个包含来自 API 的会话令牌的 URL。此 URL 将授予应用程序用户通过 API 查看来自 3rd 方数据库的搜索结果的能力。

我面临的问题是，在 iframe 中显示结果（URL）时，由于 iframe 的滚动条，它看起来非常难看。我已经得到了通常的谷歌结果，但我发现我对如何扩展 iframe 的高度以匹配传入的内容感到很困惑。

我找到了一个我想要发生的事情的例子，但是在尝试复制代码时我没有运气。

The link in question ... 如您所见，页面将 iframe 加载到基本 HTML 表格中，并扩展以适应 iframe 中内容的大小。

这是 HTML 的源代码：

<html>
<body>
<table width="100%" border=1>
    <tr><td>Header</td></tr>
    <tr><td>Navigation</td></tr>
    <tr><td>
        <iframe onload="resize(this)" src="/test/phpinfo.php">
        </iframe>
    </td></tr>
    <tr><td>footer</td></tr>
</table>    
<script>
function resize(elem){
    var outer=elem;
    var inner=elem.contentDocument.documentElement; 
    outer.style.border="0";
    outer.style.overflow="hidden";
    outer.style.height=Number(inner.scrollHeight+10)+"px";
    outer.style.width=Number(inner.scrollWidth+10)+"px";
}
</script>
</body>
</html>

没什么特别的吧？但是代码的copypasta（显然更改了src）什么也没做。我觉得我在这里服用疯狂的药丸，这应该是 2 秒的工作，但它对我不起作用。这都是客户端的东西，对吧？服务器上没有发生巫术魔法。

女士们，先生们，我做错了什么，或者我怎样才能更好地做到这一点？请记住，我无法影响 iframe 中的 HTML，因为它是通过 API 提供的，我无法触摸它。

谢谢

编辑：这就是它不起作用的原因Same Origin Policy。

【问题讨论】：

标签： javascript html api iframe

【解决方案1】：

当 iframe 来源和 iframe src 来源相等且相互匹配时，您只能使用 javascript 访问 iframe contentDocument。

否则浏览器不允许你访问内部contentDocument

Blocked a frame with origin "http://example.de" from accessing 
a frame with origin "http://otherorigin.example.de". Protocols, 
domains, and ports must match.

您发布的示例页面来源

http://frank.bridgewater.edu/test/iframeResize/

和 iframe src 来源

http://frank.bridgewater.edu/test/phpinfo.php

匹配（同源）。所以这里它正在工作，脚本可以访问 iframe contentDocument

【讨论】：

感谢您回复我。我不能优雅地做我想做的事，这很令人失望。
我的荣幸！否则，您可以在您的主机（同源）上创建一个脚本，在第三方目标上发出请求并显示用户和您的 iframe 指向此脚本 - 如果它有帮助
嗯，这可以使用 php cURL。但是还有一个问题，一旦建立连接，来自 API 的数据就会通过 AJAX 加载。我会假设我得到的只是加载栏的 HTML。为了让它工作，我需要以某种方式让 cURL 转到 URL 等待大约 10 秒，然后返回它可以看到的 HTML。我得看看这是否可能。