【问题标题】:How can I resize a cross-domain iFrame that I do not have control over如何调整我无法控制的跨域 iFrame 的大小
【发布时间】:2015-08-31 15:12:00
【问题描述】:

关于如何调整 iFrame 大小以适应非跨域或跨域但受开发人员控制的 URL 的内部内容的文章和问题很多。

但我找不到如何调整我对其零控制的 iFrame 的大小,因此无法将 postMessage 返回给父级。

这可能吗?

即想象一下我的网站 mysite.com 正在尝试 iFrame CNN.com。如何调整 CNN iFrame 的大小以显示 iFrame 的全部内容,而无需滚动 CNN iFrame。

编辑

由于 iFrame 是跨域的,由于安全限制,读取 iFrame 内容并根据内容高度重新调整大小的简单解决方案无法正常工作。例如,Chrome 在尝试读取不同域上 iFrame 的内容时给了我这个异常:

未捕获的安全错误:无法从 >“HTMLIFrameElement”读取“contentDocument”属性: 阻止访问来源为“http://dev”的框架 原点为“http://cnn.com”的框架。协议、域、 和端口必须匹配。

因此,一个常见的解决方案是让 iFramed 内容与托管页面进行通信,如 here 所示。但是,由于我的 URL CNN.com 完全是第 3 方且不受我控制,因此我无法采用跨域解决方法。

【问题讨论】:

  • 这可能吗?如果是这样,我在这里发表评论以查看更新或答案。
  • 如果您以 cnn.com 作为源创建 iFrame,您可以完全控制它。我在你的问题中遗漏了什么?
  • 如果 iframe 在您的网站“mysite.com”上,那么您可以根据需要调整 iframe 的大小。您只是无法触摸控制 iframe 内容的呈现方式。我真的不明白问题出在哪里。
  • @Lance 用于调整 iFrame 大小,许多解决方案需要在主机页面(即 mysite.com) iFrame 的源代码(即 CNN.com)中的自定义代码) 以进行重新调整大小。但是,显然我对 CNN.com 没有任何控制权,也无法将自定义代码放入 CNN 的网站以使其与主机页面 (mysite.com) 进行通信。
  • 所以您想获得 CNN 网站的高度,然后将 iframe 更改为具有完全相同的高度(所以我猜没有显示滚动条)?

标签: javascript html iframe


【解决方案1】:

根据我收到的 cmets,可以肯定地说,从客户端/浏览器端重新调整跨域 iFrame 的大小是不可能的。

也许一些复杂的服务器端算法可以请求页面并尝试给出有关大小的提示,但在客户端却无能为力。

【讨论】:

    猜你喜欢
    • 2011-01-18
    • 2011-08-20
    • 2011-08-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多