JS实现iframe自适应高度的方法(兼容IE与FireFox)

下面给出“JS实现iframe自适应高度的方法(兼容IE与FireFox)”的详细攻略：

一、原理分析

在一个页面中使用iframe，常常需要控制iframe的高度，使得iframe的高度自适应其中内容的高度，以便更好的展示iframe中的内容，而不会造成页面布局的混乱。本文将介绍一种使用JavaScript实现iframe自适应高度的方法，使得该方法具有良好的兼容性，适用于IE与Firefox等主流浏览器。

该方法的主要原理是：在iframe中的页面加载完成之后，通过JavaScript获取iframe中文档的高度，然后将该高度设置为iframe的高度即可。在该过程中，可能需要做一些兼容性处理，以确保代码可以成功运行。

二、实现步骤

步骤一：编写iframe页面

首先，需要编写一个iframe页面，作为需要嵌入到主页面中的内容。在该页面中，需要将内容限定在一个容器中，以便更好地计算内容的高度。例如：

<body>
<div class="container">
<!-- iframe中的内容 -->
</div>
</body>

步骤二：编写主页面

接着，需要在主页面中使用iframe来加载上一步中编写的页面。例如：

<body>
<iframe src="iframe.html" id="myIframe" frameborder="0" scrolling="no"></iframe>
<script>
//在这里编写JavaScript代码
</script>
</body>

需要注意的是，需要将iframe的scrolling属性设置为no，以便兼容FireFox浏览器。

步骤三：编写JavaScript代码

接下来，在主页面中编写JavaScript代码，实现iframe自适应高度的效果。具体的代码如下：

var iframe = document.getElementById("myIframe"); //获取iframe对象
if (iframe.attachEvent){ //判断浏览器是否是IE
    iframe.attachEvent("onload", function(){
    //在iframe加载完成后，执行以下代码
    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
    //获取iframe的文档对象
    if (iframeWin.document.body) {
        //计算iframe文档的高度
        var iframeHeight = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        //设置iframe的高度
        iframe.height = iframeHeight + "px";
        }
    });
} else {
    //非IE浏览器，使用onload事件
    iframe.onload = function() {
    var iframeWin = iframe.contentWindow || iframe.contentDocument.defaultView;
        if (iframeWin.document.body) {
            var iframeHeight = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
            iframe.height = iframeHeight + "px";
        }
    };
}

在该代码中，首先使用document.getElementById方法获取iframe对象，然后判断浏览器是否是IE，并分别使用attachEvent和onload事件来处理iframe加载完毕的事件。在获取iframe文档对象之后，计算该文档的高度，并将该高度设置为iframe的高度，从而实现自适应高度的效果。

步骤四：测试与兼容性处理

最后，进行测试，确保代码可以在主流浏览器中运行，并对可能出现的兼容性问题进行处理。

例如，在旧版的IE浏览器中，可能需要使用document.documentElement.scrollHeight来获取iframe文档的高度，并为iframe添加一个额外的属性，如scrolling="yes"来保证代码的正常运行。

三、示例说明

以下是两个简单的示例，用以说明该方法的使用：

示例一：嵌入单个页面

在该示例中，我们将在一个主页面中嵌入一个单独的页面，并使用JavaScript实现自适应高度的效果。主页面的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例一</title>
</head>
<body>
    <iframe src="iframe.html" id="myIframe" frameborder="0" scrolling="no"></iframe>
    <script>
    var iframe = document.getElementById("myIframe");
    if (iframe.attachEvent){
        iframe.attachEvent("onload", function(){
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                var iframeHeight = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                iframe.height = iframeHeight + "px";
            }
        });
    } else {
        iframe.onload = function() {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.defaultView;
            if (iframeWin.document.body) {
                var iframeHeight = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                iframe.height = iframeHeight + "px";
            }
        };
    }
    </script>
</body>
</html>

同时，我们编写了一个简单的iframe页面，用于展示该示例。该页面的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <style>
        .container {
            width: 100%;
            height: 500px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个示例页面，用于测试 JavaScript 实现 iframe 自适应大小的效果。</p>
        <p>本页面的高度将自动适应 iframe 的大小。</p>
    </div>
</body>
</html>

运行该示例，可以看到iframe的高度会自动适应页面中的内容，从而实现了自适应高度的效果。

示例二：嵌入多个页面

在该示例中，我们将在一个主页面中嵌入多个页面，并使用相同的JavaScript代码来实现自适应高度的效果。主页面的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例二</title>
</head>
<body>
    <iframe src="iframe1.html" id="myIframe1" frameborder="0" scrolling="no"></iframe>
    <iframe src="iframe2.html" id="myIframe2" frameborder="0" scrolling="no"></iframe>
    <script>
    var iframes = document.getElementsByTagName("iframe");
    for (var i = 0; i < iframes.length; i++) {
        var iframe = iframes[i];
        if (iframe.attachEvent){
            iframe.attachEvent("onload", function(){
                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                if (iframeWin.document.body) {
                    var iframeHeight = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                    iframe.height = iframeHeight + "px";
                }
            });
        } else {
            iframe.onload = function() {
                var iframeWin = iframe.contentWindow || iframe.contentDocument.defaultView;
                if (iframeWin.document.body) {
                    var iframeHeight = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                    iframe.height = iframeHeight + "px";
                }
            };
        }
    }
    </script>
</body>
</html>

在该示例中，我们嵌入了两个iframe页面，并使用一个循环来处理所有的iframe对象。由于该示例与示例一类似，因此这里不再重复介绍，读者可以自行测试该示例以理解该方法的使用。

以上就是“JS实现iframe自适应高度的方法(兼容IE与FireFox)”的详细攻略，包含了该方法的原理、实现步骤以及两个示例的说明。希望可以对读者有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现iframe自适应高度的方法(兼容IE与FireFox) - Python技术站