javascript - 需要一个动态 iframe 来调整内容并响应设备屏幕/窗口大小

Question

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

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

我有两个问题:

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

b) iFrame(以及其中的内容)对于正在查看的屏幕/窗口尺寸不响应。例如，当我在移动设备上查看父页面时，iFrame 本身(以及其中的内容)会被切断。

我需要一个动态 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 在 fiddle 中一样。您必须能够编辑 src 文件才能更改 iframe 中元素的行为。