根据内容调整iframe大小
iframe HTML元素经常用于插入来自另一个源的内容。需要调整大小的内容通过使用div标签间接完成。诀窍是使用div标签初始化并在iframe标签内部封闭。现在为iframe提供CSS。
注意: 要打开源站点以调整其内容,源站点必须在同一个目录中列出。
示例1: 下面是使用内部CSS调整内容的HTML代码实现:
内部CSS:
输出:
在这里,我们使用了内部样式表来将显示区域的尺寸固定为像素宽度和高度。CSS的overflow属性控制了内容是否超出了区域。
示例2: 下面是使用Javascript来调整内容大小的HTML代码的实现:我们将使用JavaScript的contentWindow属性自动根据内容调整iFrame的高度,不会出现滚动条。
- 我们在脚本标记内选择iFrame:
let iframe = document.getElementById(“myIframe”);
-
我们通过以下方式调整iFrame的高度:
iframe.onload = function(){}
输出: