Question

我正在开发一个应用程序，该应用程序从API提供包含会话令牌的URL。此URL将授予应用程序用户通过API查看第三方数据库的搜索结果的权限。

我面临的问题是，当在iframe中显示结果（网址）时，由于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不起作用的原因。

Answer 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 origin

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

匹配（相同的起源）。所以这里工作正常，脚本可以访问iframe contentDocument

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

1 个答案: