Question

我正在编写我的网站的一个组件，最终将通过iframe嵌入到其他网站上。但是，我希望嵌入页面上iframe的高度能够根据嵌入内容的高度（根据屏幕大小而变化）进行动态调整。

此外，我需要iframe的高度才能响应（即，当屏幕尺寸发生变化时，它会自动调整）。

我认为嵌入式代码可能看起来像这样：

<iframe src="/path/to/embedded/page" other-properties />
<script src="/path/to/script/from/my/site" />

但是，你能否指出我在哪里开始编写一个可根据屏幕尺寸动态调整iframe高度的脚本？

Answer 1

表示iframe的宽度您可以根据容器

调整iframe的宽度

示例

<div class="container_of_iframe" style="width:200px;">
  <iframe src="/path/to/embedded/page" style="width:100%;" />
  <script src="/path/to/script/from/my/site" />
 </div>

对于高度，您还可以根据容器指定iframe的高度，但最好使用固定高度来制作iframe，因为有些时候您不知道容器高度，还有容器高度可能不是块元素，因此iframe高度不会相对于容器

<div class="container_of_iframe" style="width:200px;">
  <iframe src="/path/to/embedded/page" style="height:300px;" />
  <script src="/path/to/script/from/my/site" />
</div>

了解更多信息，请查看这些链接

example of responsive iframe

http://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

具有响应大小的嵌入式iFrame

1 个答案: