如何让iframe高度自适应

前言

今天有朋友问到我关于“iframe 自适应高度”的问题，原本以为是很简单的问题，没想到折腾了 20 分钟才搞定。期间遇到几个问题，要么是高度自适应了，但是当窗口改变时会出现滚动条。也就是当窗口放大时 iframe 没有自动跟随变大显得很小，或是当窗口缩小时 iframe 还是之前那么大就出现了滚动条。还有或是高度不准确，那么就达不到想要的效果了。

为什么需要使用 iframe 自适应高度呢？其实就是为了美观，要不然 iframe 和窗口长短大小不一，看起来总是不那么舒服，特别是对于我们这些编程的来说，如鲠在喉的感觉。

场景说明

1. 有 A.html 与 B.html 两个页面；
2. A.html 里包含了 B.html 的内容(B.html 通过 iframe 嵌套在 A.html 里，设 iframe 的 ID 为”iframe001″);
3. B.html 的内容高度不固定；
4. A.html 里包含 B.html 的 iframe 出现滚动条；

场景需求

让 A.html 页面里的 iframe 高度自适应，使之不出现滚动条；

一、JavaScript 代码

/**
 * iframe 服务
 * @param {object} config 配置数据
 */
let $IFrameService = function (config) {
    let $this = this;

    /** 创建配置 */
    let $newConfig = function () {
        return {
            /** iframe 的 ID 列表(例如: ["frame1", "frame2"]) */
            targetIds: [],
        };
    };

    /**
     * 读取相关配置
     * @param {object} config 配置参数
     */
    let $loadConfig = function (config) {
        if (!config) { return $config; }
        if (config.targetIds) { $config.targetIds = config.targetIds; }
        return $config;
    };

    /** 参数 */
    let $config = $newConfig();
    $config = $loadConfig(config);

    /**
     * 读取相关配置
     * @param {object} config 配置参数
     */
    this.LoadConfig = function (config) {
        $loadConfig(config);
        return $this;
    };

    /** 自适应高度 */
    this.SetHeightFit = function () {
        let _config = {
            targetIds: [],
        };
        if ($config) {
            _config.targetIds = $config.targetIds;
        }

        let _targetIds = _config.targetIds;
        let _iframes = new Array();
        for (i = 0; i < _targetIds.length; i++) {
            if (document.getElementById) {
                let _iframe = document.getElementById(_targetIds[i]);
                _iframes[_iframes.length] = _iframe;

                if (!_iframe) { continue; }
                try {
                    let _window = _iframe.contentWindow || _iframe.contentDocument.parentWindow;
                    //console.log(_window)
                    if (_window.document.body) {
                        //console.log(_window.document.documentElement.scrollHeight);
                        //console.log(_window.document.body.scrollHeight);
                        _iframe.style.height = (_window.document.documentElement.scrollHeight || _window.document.body.scrollHeight) + 'px';
                        //console.log(_iframe.style.height);
                    }
                }
                catch (ex) { console.log(ex); }

            } 
        }
        return $this;
    };

    /** 设置 iframe 的高度自适应 */
    this.SetHeightAutoFit = function () {
        let _action = function () {
            if (!$this) { return; }
            $this.SetHeightFit();
        };
        setInterval(_action, 200);

        //if (window.addEventListener) {
        //    window.addEventListener("load", _action, false);
        //}
        //else if (window.attachEvent) {
        //    window.attachEvent("onload", _action);
        //}
        //else {
        //    window.onload = _action;
        //}
        return $this;
    };

};

/** iframe 服务 */
var $iframeSvc = new $IFrameService();

二、如何使用

1. 在 A.html 页面引用该 Js 文件；
2. 加入以下 js 代码（在页面加载后执行）:

$iframeSvc.LoadConfig({ targetIds: ['iframe001'] }).SetHeightAutoFit();

结语

以上就是如何让 iframe 高度自适应的方法，大家可以拿去使用啦。

以上关于如何让iframe高度自适应的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。