Question

这个问题已经发布了很多次，我已经推荐过但不适合我。我有一个iframe加载另一个wesite。我希望iframe的高度必须根据加载的网站页面的高度动态更改。没有手动高度设置。我怎么能这样做？

<iframe src="http://www.w3schools.com/" width:150;></iframe>

有人可以摆弄并告诉我吗？谢谢你的帮助。下面的小提琴链接：

[link]（http://jsfiddle.net/vineetgnair/5p0pL5zu/）

Answer 1

以跨浏览器安全的方式做起来并不容易。您最好使用为您执行此操作的JavaScript库。我之前已成功使用this one。

Answer 2

您的代码错误

<iframe src="http://www.w3schools.com/" width=150;></iframe>

冒号（:)必须替换等号（=）

如果你想要响应，请以宽度为百分比为其提供完全响应

<iframe src="http://www.w3schools.com/" width=100%;></iframe>

Answer 3

首先，你需要使用下面css部分中给出的一些css技术来使你的iframe全高。然后获取iframe的高度（src iframe中给定网址的完整高度），将该高度传递给iframe ..

css：

  <style>
body,
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
iframe {
    width: 100%;
    /*set your width here*/
    height: 100%;
    border: none;
}
  </style>

身体部分：

<iframe src="http://www.w3schools.com" frameborder="0" width="100%"  id="frameid">   </iframe>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<script type="text/javascript">
var theHeight = $('#frameid').height();
$('#frameid').attr('height', theHeight);
console.log(theHeight);
</script>

如何根据内容加载动态设置Iframe的高度？

3 个答案: