监听div的resize

TNFE 发布于2019-08-23 12:10 / 2633人阅读

摘要：上网找了找，对于的事件的监听，实现方式有很多，比如基于的小插件通过元素进行监听来监听元素基于的周期性检查虽然是实现了对元素宽高的监听，但看上去很瓜。

  简单点说，就是：
     在被监听的 div 中添加 iframe 标签，设置其高宽均为 100%；
     在 iframe 的 resize 被触发时，则表明 div 的大小正在改变！

参考

Resize on div element 来源于stackoverflow 的回答

历程

日常开发中，遇到元素宽高改变时需要广播事件，由于此时窗口大小并未改变，故添加resize回调没用；而且该元素是因为某些dom隐藏，其高宽自适应所导致，而不是通过js设置，故 MutationObserver 也无法监听到。
上网找了找，对于div的resize事件的监听，实现方式有很多，比如：

基于jquery的小插件
通过object元素进行监听
scroll来监听元素resize
基于requestanimationframe的周期性检查

虽然是实现了对元素宽高的监听，但看上去很瓜。直到看到了stackoverflow 的回答...

代码

这是我们要监听的元素和样式

模拟resize的函数，参数el为被监听的元素，cb为回调函数

function riseze (el, cb) {
    // 创建iframe标签，设置样式并插入到被监听元素中
    var iframe = document.createElement("iframe");
    iframe.setAttribute("class", "size-watch");
    el.appendChild(iframe);

    // 记录元素当前宽高
    var oldWidth = el.offsetWidth;
    var oldHeight = el.offsetHeight;

    // iframe 大小变化时的回调函数
    function sizeChange () {
        // 记录元素变化后的宽高
        var width = el.offsetWidth;
        var height = el.offsetHeight;
        // 不一致时触发回调函数 cb，并更新元素当前宽高
        if (width !== oldWidth || height !== oldHeight) {
            cb({width: width, height: height}, {width: oldWidth, height: oldHeight});
            oldWidth = width;
            oldHeight = height;
        }
    }

    // 设置定时器用于节流
    var timer = 0;
    // 将 sizeChange 函数挂载到 iframe 的resize回调中
    iframe.contentWindow.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(sizeChange, 20);
    };
}

这边是iframe的样式

.size-watch {
    width: 100%;
    height: 100%;
    position: absolute;
    visibility:hidden;
    margin: 0;
    padding: 0;
    border: 0;
}

测试

试一哈...

结果就是这样子

溜溜球~

云服务器 GPU云服务器 resizable resize resize2fs div的高度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98051.html

监听div的resize

摘要：上网找了找，对于的事件的监听，实现方式有很多，比如基于的小插件通过元素进行监听来监听元素基于的周期性检查虽然是实现了对元素宽高的监听，但看上去很瓜。简单点说，就是：在被监听的 div 中添加 iframe 标签，设置其高宽均为 100%；在 iframe 的 resize 被触发时，则表明 div 的大小正在改变！参考 Resize on div el...

legendaryedu 2019-08-02 11:37 评论0 收藏0
js监听div元素的宽高变化

摘要：构造函数，参数为回调函数构造函数为，它在监听到中的改变并且一系列改变结束后触发回调函数。是要监听的元素，为监听选项对象，可选的选项如下所以监听元素宽高变化，就是监听属性变化这样当元素发生变化时，就会触发构造函数中的函数。一、js监听window变化的方法 1、onsize只能监听window对象的变化 (1)、 window对象原生、jQuery方法 //原生写法 window.on...

lansheng228 2019-08-23 18:21 评论0 收藏0
如何优雅监听容器高度变化

摘要：哈哈哈哈，以上纯属虚构，不过在最近项目中还真遇到过对容器监听高宽变化在使用或滚动插件，如果容器内部元素有高度变化要去及时更新外部包裹容器，即调用方法。处理很简单，只需在动画停止事件触发时监听高宽变化即可。前言老鸟：怎样去监听 DOM 元素的高度变化呢？菜鸟：哈哈哈哈哈，这都不知道哦，用 onresize 事件鸭！老鸟扶了扶眼睛，空气安静几秒钟，菜鸟才晃过神来。对鸭，普通 DOM 元...

hizengzeng 2019-08-26 10:20 评论0 收藏0