如何让iframe高度自适应

如何让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高度自适应的方法,大家可以拿去使用啦。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何让iframe高度自适应

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们