垂直展开包含iFrame的DIV

Sha*_*oon 2 html css iframe

http://jsfiddle.net/fJkBU/1/

那是我的代码.基本上,我有一个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>
Run Code Online (Sandbox Code Playgroud)

Tom*_*mas 12

所有其他方法都行不通,因为......

......正如paislee的评论所指出的那样,Mozilla(以及所有其他主流浏览器)都有一个名为"同源策略"的东西,它指出:

相同的源策略可防止从一个源加载的文档或脚本从另一个源获取或设置文档的属性.

从本质上讲,Mozilla确保您无法通过JavaScript访问其他网页的属性,因为这会带来安全隐患(对于cookie劫持等我认为).


例如,在讨论同一来源页面的iframe时,这是一个类似的问题 ; 这是适用于您的问题的答案.正如您在Firefox的错误控制台中看到的那样,您的"权限被拒绝访问属性文档"...

好的,所以你现在有几个选项,你知道你无法通过JavaScript访问iframe的高度(因为它托管在另一个域上):

  1. 更改它,以便您控制iframe的内容(然后将其置于同一域下或使用类似问题中发布的解决方案).
  2. 假设1不可能,您必须使用您的服务器访问该网页.这里的第一个选项是屏幕抓取iFrame的内容,然后显示它

    • 如果您不想编写屏幕抓取工具,可以使用代理脚本,然后显示代理的iframe(托管在同一台服务器上); 这将允许您访问该网站,就像我们是您自己的一样,并且用户会注意到没有区别(注意:我很确定这是违反所有服务条款/可能非法的,因为用户可能尝试与iframe中的网站(不知道它是通过代理加载的)(即登录)......你实际上是网络钓鱼)
  3. 我假设在iframe中加载的是一组注释(ID类型给了它),我也可以自由地假设每个注释都有一个固定的高度或最大高度.在这种情况下,您可以编写一个加载页面的PHP脚本,计算注释量(正则表达式),然后将注释高度的数字相乘,以确定iframe的适当高度

祝好运,