Question

这是我的代码。基本上，我有一个iFrame，其源可能会改变。我需要包含DIV来垂直扩展以容纳iFrame中的任何内容。

我无法让它发挥作用。有什么想法吗？

我的代码

<!DOCTYPE html>
<html>
  <head>
    <title>Ruby on Rails: Welcome aboard</title>
  </head>
  <body>
    <div id="page">
      <div id="content">

        <div id='commentLoader' style="width: 500px;">
            <iframe id="commentIframe" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

所有其他方法将无效，因为......

... Mozilla（以及所有其他主流浏览器，如paislee的评论中所指出的）有一个名为"Same Origin Policy"的东西，其中指出：

相同的原始策略会阻止从一个文档或脚本加载的文档或脚本来自获取或设置文档属性的来源原点。

基本上，Mozilla确保您无法通过JavaScript访问其他网页的属性，因为这会带来安全隐患（对于cookie劫持而且我相信）。

例如，在讨论同一来源页面的iframe时，这是一个similar question;这是the answer as applied to your problem。正如您在Firefox的错误控制台中看到的那样，您的“权限被拒绝访问属性文档”......

好的，所以你现在有几个选项，你知道你无法通过JavaScript访问iframe的高度（因为它托管在另一个域）：

更改它以便您控制iframe的内容（然后将其置于同一域下或使用similar question中发布的解决方案。）
假设无法使用1，则必须使用服务器访问该网页。这里的第一个选项是屏幕抓取iFrame的内容，然后显示它
- 如果您不想编写屏幕抓取工具，可以使用代理脚本，然后显示代理的iframe（托管在同一台服务器上）;这将允许您访问该网站，就像我们是您自己的一样，并且用户会注意到没有区别（注意：我很确定这是违反所有服务条款/可能非法的用户可以尝试在iframe（即登录）中与网站进行交互（不知道它是通过代理加载的）......并且您实际上是网络钓鱼）
我假设在iframe中加载的内容是一组注释（ID类型给了它），我也可以自由地假设每条注释都有一个固定的高度或最大高度。在这种情况下，您可以编写一个加载页面的PHP脚本，计算注释量（正则表达式），然后将注释高度的数字相乘以确定iframe的适当高度

Answer 2

如果iFrame从同一个域加载，您可以尝试Iframe SSI script II。我使用这个脚本的方式回到课堂项目，但你可以试一试。

Answer 3

我不确定我100％得到你的答案，但如果你想要一个容器因内容而垂直扩展你可以使用jquery ajax。当你在里面加载内容时会产生一个新的高度。给这个div一些风格，你自己动态生成div高度。基本上，你会把这个页面放在你的页面上。

搜索跨域ajax。我过去曾经使用它，它不是很漂亮但是很有效！

Answer 4

在Iframe onload事件中调用以下Javascript函数。

function autoResize(id)
    {
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
    }
    document.getElementById(id).height= (newheight) + "px";
}

e.g：

<iframe id="commentIframe"  onload="autoResize('commentIframe')" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>

Answer 5

你的CSS ID周围有单引号。将它们替换为双引号，如代码的其余部分。

变化：

id='commentLoader'

为：

id="commentLoader"

垂直展开包含iFrame的DIV

5 个答案:

所有其他方法将无效，因为......