iframe窗口根据内容自适应大小

最新推荐文章于 2022-02-24 11:39:02 发布

qq_41346752

最新推荐文章于 2022-02-24 11:39:02 发布

阅读量2.4k

点赞数 1

分类专栏：文章文章标签： javascript

本文链接：https://blog.csdn.net/qq_41346752/article/details/119035210

版权

文章专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该博客介绍了如何在网页中使iframe子窗体内容不被遮盖且无滚动条，通过JavaScript动态调整iframe的宽度和高度以适应内容变化。使用MutationObserver监听子窗体内容动态更新，确保子窗体始终能完整显示其内容。

摘要由CSDN通过智能技术生成

需求
需要让iframe子窗体在页面显示出的内容不被遮盖且没有滚轴，能够完整的显示出来。
实现

  window.onload = function () {
  		//1.获取子窗体
        var iframes = document.getElementsByClassName("formIframe");
        for (let i = 0; i < iframes.length; i++) {
            var iframeWindow = iframes[i].contentWindow;
            var iframeDocEle = iframeWindow.document.documentElement
            //2.根据子窗体的滚轴长宽并动态改变子窗体的长宽
            var iframeWidth, iframeHeight;
            iframeWidth = iframeDocEle.scrollWidth;
            iframeHeight = iframeDocEle.scrollHeight;
            iframes[i].width = iframeWidth;
            iframes[i].height = iframeHeight;
            //2.监听子窗体的的滚轴长度
            // 选择将观察突变的节点
            var targetNode = iframeDocEle;
			//3.监听后续子窗体内容的动态变化并在动态的随着更改子窗体的大小
            // 3.1观察者的选项(要观察哪些突变)
            var config = {attributes: true, childList: true, subtree: true};
            // 3.2当观察到突变时执行的回调函数
            var callback = function (mutationsList) {
            
                var iframeWidth, iframeHeight;
                iframeWidth = iframeDocEle.scrollWidth;
                iframeHeight = iframeDocEle.scrollHeight;
                iframes[i].width = iframeWidth;
                iframes[i].height = iframeHeight;
            };
            //3.3 创建一个链接到回调函数的观察者实例
            var observer = new MutationObserver(callback);
            // 3.4开始观察已配置突变的目标节点
            observer.observe(targetNode, config);
        }
    }