js监听某个元素高度变化来改变父级iframe的高度

最新推荐文章于 2023-09-21 16:31:11 发布

前端李小白

最新推荐文章于 2023-09-21 16:31:11 发布

阅读量881

点赞数

分类专栏： Jquery 文章标签： iframe

本文链接：https://blog.csdn.net/qq_42268364/article/details/103385852

版权

本文介绍了如何解决iframe内高度不确定的问题，通过detect-element-resize.js插件实现实时监听iframe内body元素高度变化，动态调整iframe自身高度，确保内容完整显示。该插件兼容多种浏览器，并能检测CSS伪类和JavaScript生成的尺寸变化。

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

最近需要做一个iframe调用其他页面内容，这个iframe地址是可变化的，但是里面的内容高度不确定且里面内容高度可调整，所以需要通过监听iframe里面body的高度变化来调整iframe的高度。

后面发现了一个好用的插件detect-element-resize.js，首先看一下这个插件的介绍：

插件简介

跨浏览器，基于事件，元素调整大小检测。

简而言之，此实现不使用内部计时器来检测大小更改（就像我发现的大多数实现一样）。它使用scroll大多数浏览器上的onresize事件，以及IE10及以下的事件。

使用的方法不仅检测javascript生成的调整大小更改，还检测CSS伪类的更改，例如：hover，CSS动画等。

插件兼容性

Chrome
Firefox
IE 11 及以下 (在11,10,9,8和7上测试)

已知问题

在IE 10及更低版本上：如果分离元素并重新附加它，则需要再次添加调整大小侦听器。
源代码

(function () {
   
    var attachEvent = document.attachEvent,
        stylesCreated = false;
     
    if (!attachEvent) {
   
        var requestFrame = (function(){
   
            var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
                                function(fn){
    return window.setTimeout(fn, 20); };
            return function(fn){
    return raf(fn); };
        })();
         
        var cancelFrame = (function(){
   
            var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
                                   window.clearTimeout;
          return function(id){
    return cancel(id); };
        })();
 
        function resetTriggers(element){
   
            var triggers = element.__resizeTriggers__,
                expand = triggers.firstElementChild,
                contract = triggers.lastElementChild,
                expandChild = expand.firstElementChild;
            contract.scrollLeft = contract.scrollWidth;
            contract.scrollTop = contract.scrollHeight;
            expandChild.style.width = expand.offsetWidth + 1 + 'px';
            expandChild.style.height = expand.offsetHeight + 1 + 'px';
            expand.scrollLeft = expand.scrollWidth;
            expand