[Javascript][JS]iframe高度自适应(原创)

开发作者：Jackie Law
开发时间：2021-08-04
开发语言：Javascript
浏 览 器：Microsoft Edge(版本 92.0.902.62 )

场景说明：

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出现滚动条；

场景需求

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

一.JavaScript代码

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

    /** 创建配置 */
    let $newConfig = function () {
        return {
            /** iframe的ID列表(例如: ["frame1", "frame2"]) */
            targetIds: [],
            /** 是否适应iframe的父元素的高度 */
            parentHeightFit: false,
            /** iframe的父元素的垂直偏移(偏移值>=parent高度-iframe高度，否则iframe会无限增高) */
            parentVOffset: 20,
        };
    };
    /** 创建配置数据 */
    this.CreateConfig = function () { return $newConfig(); };

    /**
     * 读取相关配置
     * @param {object} config 配置参数
     */
    let $loadConfig = function (config) {
        if (!config) { return $config; }
        if (config.targetIds) { $config.targetIds = config.targetIds; }
        if (config.parentHeightFit) { $config.parentHeightFit = config.parentHeightFit; }
        if (config.parentVOffset) { $config.parentVOffset= config.parentVOffset; }
        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: [],
            parentHeightFit: false,
            parentVOffset: 0,
        };
        if ($config) {
            _config.targetIds = $config.targetIds;
            _config.parentHeightFit = $config.parentHeightFit;
            _config.parentVOffset= $config.parentVOffset;
        }

        let _iframes = new Array();
        for (i = 0; i < _config.targetIds.length; i++) {
            if (document.getElementById) {
                let _iframe = document.getElementById(_config.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);
                    }
                    
                    if (_config.parentHeightFit) {
                        if ((_iframe.parentElement.scrollHeight || _iframe.parentElement.offsetHeight) > _height + _config.parentVOffset) {
                            _height = (_iframe.parentElement.scrollHeight || _iframe.parentElement.offsetHeight);
                            _iframe.style.height = _height + 'px';
                        }
                    }
                }
                catch (ex) { console.log(ex); }

            } 
        }
        return $this;
    };

    let $setHeightHandler = -1;
    /** 启动iframe的高度自适应 */
    this.StartHeightAutoFit = function () {
        let _action = function () {
            if (!$this) { return; }
            $this.SetHeightFit();
        };
        $setHeightHandler = setInterval(_action, 200);
        return $this;
    };

    /** 停止iframe的高度自适应 */
    this.StopHeightAutoFit = function () {
        clearInterval($setHeightHandler);
        return $this;
    };

};

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

二.使用方式

1.配置目标iframe

// 重新实例化
var $iframe = new $iFrameService({ targetIds: ['iframe001'] });

//使用JS文件里已创建的实例
$iframe.LoadConfig({ targetIds: ['iframe001'] });

属性	类型	说明
targetIds	string[]	目标iframe的ID集合
parentHeightFit	bool	是否适应iframe的父元素的高度
parentVOffset	number	iframe的父元素的垂直偏移(偏移值>=parent高度-iframe高度，否则iframe会无限增高)

2.适应iframe的高度

//使用实例
$iframe.SetHeightFit();

3.启动iframe的高度自适应

//使用实例
$iframe.StartHeightAutoFit();

4.停止iframe的高度自适应

//使用实例
$iframe.StopHeightAutoFit();

Demo

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

//适应iframe的高度
$iframe.LoadConfig({ targetIds: ['iframe001'] })
       .SetHeightFit();
          
//启动iframe的高度自适应
$iframe.LoadConfig({ targetIds: ['iframe001'] })
       .StartHeightAutoFit();
          
//停止iframe的高度自适应
$iframe.StopHeightAutoFit();