内容编辑器 Web 部件中的 iFrame答案

【问题标题】：iFrame in a Content Editor Web Part内容编辑器 Web 部件中的 iFrame
【发布时间】：2011-02-14 22:35:29
【问题描述】：

我正在创建一个包含两个 Web 部件的页面：一个带有搜索 UI，另一个显示结果。我对两者都使用了内容编辑器 Web 部件，但无论我多么努力，我似乎都无法在带有 iFrame 的内容编辑器 Web 部件中显示超过一小部分的结果页面。宽度似乎设置得很好，但无论我如何设置高度（我尝试过内联、使用 CSS 和使用 Javascript/JQuery），我都无法更改显示的高度。如果我将高度设置为 3000px 之类的荒谬，我可以看到下面的空白区域，但它仍然只在 iframe 部分的顶部显示一小部分结果页面。

我观察到 HTML 和 iFrame 占用了它应有的所有空间，但只显示 iFrame 正在显示的实际页面的一小部分。我已经尝试了许多文章中的许多方法，但都提出了简短的（双关语）。

有没有人对此有任何经验或有迹象表明它为什么会以这种方式显示或我必须做些什么才能使这个 iFrame 填满整个 Web 部件空间？

提前致谢

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

如果在 iframe 上设置宽度和高度（如下所示）不起作用

<iframe width="200px" height="200px...></iframe>

这意味着您的内容存在样式问题。您的内容是什么样的。

【讨论】：

内容是搜索的结果。当我在浏览器中加载它时，它会显示整个页面。我没有对内容应用任何样式。我所做的只是将 iFrame 的 src 属性设置为查询结果
如果您的内部内容没有被任何元素设置样式或包裹，那么您应该考虑使用具有 width 和 height 属性的 div 元素包裹它。例如：<div style="width: 400px; height:400px;">content...</div>。看看这对你有什么作用。
谢谢侯赛因 - 我确实发现我必须调整父 div 的高度，并确认如果我加载谷歌页面，整个页面都会显示出来。但是，我的查询的结果页面仍然表现出不同的行为，仅显示在 iframe 的大约 50px 高度（宽度很好）。我的下一步是尝试捕获 iframe 的 onload 事件，以便在加载后尝试调整高度。还有其他建议吗？
@music，您可以使用 jQuery 强制将内容的高度调整为 iframe 的高度。您可以使用$('#content').height(('iframe').height());，其中#content 是您在iframe 中的内容的ID。