根据内容调整iframe大小

根据内容调整iframe大小

iframe HTML元素经常用于插入来自另一个源的内容。需要调整大小的内容通过使用div标签间接完成。诀窍是使用div标签初始化并在iframe标签内部封闭。现在为iframe提供CSS

注意: 要打开源站点以调整其内容,源站点必须在同一个目录中列出。

示例1: 下面是使用内部CSS调整内容的HTML代码实现:

内部CSS

<!DOCTYPE html>
<html>
 
<head>
    <style>
        body {
            background-color: LIGHTGREY;
        }
         
        #target {
            width: 300px;
            height: 200px;
            overflow-y: auto;
            overflow-x: auto;
            resize: both;
            position: relative;
            z-index: 2;
        }
         
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
 
</head>
 
<body>
    <div id="target">
        <iframe src="/tryit.php"></iframe>
    </div>
</body>
 
</html>
HTML

输出:

根据内容调整iframe大小

在这里,我们使用了内部样式表来将显示区域的尺寸固定为像素宽度和高度。CSS的overflow属性控制了内容是否超出了区域。

示例2: 下面是使用Javascript来调整内容大小的HTML代码的实现:我们将使用JavaScript的contentWindow属性自动根据内容调整iFrame的高度,不会出现滚动条。

  • 我们在脚本标记内选择iFrame:

    let iframe = document.getElementById(“myIframe”);

  • 我们通过以下方式调整iFrame的高度:

    iframe.onload = function(){}

<!DOCTYPE html>
<html>
 
<head>
    <style>
        div {
            width: 50%;
        }
    </style>
</head>
 
<body>
    <iframe src="/tryit.php" id="target">
    </iframe>
    <script>
        let div = document.getElementById("target");
        div.onload = function() {
            div.style.height =
            div.contentWindow.document.body.scrollHeight + 'px';
        }
    </script>
</body>
 
</html>
HTML

输出:

根据内容调整iframe大小

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程