javascript - 需要一个动态 iframe，它可以根据内容进行调整并且响应设备屏幕/窗口大小

Question

我在高级编码方面非常缺乏经验，我正在设计我的第一个响应式 Wordpress 网站。我有一个“产品搜索”数据库/站点，我试图通过 iFrame 将其集成到我的站点中。它需要看起来无缝，所以我想避免框架周围出现滚动条。

这是供引用的页面:http://alwayzadvertising.seattlewebsolutions.com/wp/?page_id=63

我有两个问题:

a) iFrame 的动态 不足以适应其中的内容。数据库中每个“页面”的内容各不相同，因此如果我设置固定的框架高度，其中的内容往往会在底部被 chop 。

b) iFrame(和其中的内容)不响应正在查看它的屏幕/窗口大小。例如，当我在我的移动设备上查看父页面时，iFrame 本身(以及其中的内容)被 chop 了。

我需要一个动态 iframe，它可以根据其中的内容进行调整，并且能够响应正在查看它的设备屏幕/窗口大小。坦率地说，我在编码方面的知识非常有限，所以如果有人知道如何解决这个问题，并且可以向我详细解释 - 我将永远感激!!

这是我在上面链接的页面上用于 iframe 的代码:

    <iframe id="espweb" src="http://alwayzinc.espwebsite.com/" height="1700" width="100%" frameborder="0" scrolling="no"></iframe>

Answer 1

无需 Javascript 即可运行:Fiddle

HTML

<div class="fluidMedia">
<iframe src="http://www.example.com" frameborder="0"></iframe>
</div>

CSS

.fluidMedia {
position: relative;
padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
padding-top: 30px;
height: 0;
overflow: hidden;
}

.fluidMedia iframe {
position: absolute;
top: 0; 
left: 0;
width: 100%;
height: 100%;
}

归功于这个人:Michael Lancaster

为了使其具有响应性，您必须使加载到 iframe 中的页面具有响应性，就像 example.com 一样。您必须能够编辑 src 文件才能更改 iframe 中元素的行为。