Question

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

以下是供参考的页面：http://alwayzadvertising.seattlewebsolutions.com/wp/?page_id=63

我有两个问题：

a）iFrame 动态不足以适应其中的内容。内容因各页＆＃34;页面而异。在数据库中，所以如果我设置一个固定的框架高度，内部的内容往往会在底部被切断。

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在小提琴中一样。您必须能够编辑src文件才能更改iframe中元素的行为。

Answer 2

如果要动态调整iframe高度，请在父框架中创建一些代码，如下所示

<script type=”text/javascript”>
window.onload = function(){
  resizeFrame(document.getElementById('espweb'));
};
function resizeFrame(f) {
f.style.height = f.contentWindow.document.body.scrollHeight + “px”;
}
</script>

当父框架的主体加载时，它会查找子框架的文档元素然后页面调用名为resizeFrame的函数。该函数将框架的高度设置为scrollHeight。我希望它对你有所帮助

需要一个动态iframe，它可以调整到内部的内容，并且响应设备屏幕/窗口大小

2 个答案: