利用iframe 监听页面宽度变化

最新推荐文章于 2024-03-02 16:51:33 发布

爱吃爱喝爱玩儿乐

最新推荐文章于 2024-03-02 16:51:33 发布

阅读量1.2k

点赞数

分类专栏： vue JavaScript 文章标签： vue iframe

本文链接：https://blog.csdn.net/ms_alinda/article/details/120762947

版权

vue 同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

JavaScript

11 篇文章 1 订阅

订阅专栏

本文探讨了一种前端开发中常见的布局挑战：如何在左侧菜单可展开/收缩的情况下，使底部按钮的宽度与右侧内容区域保持一致。解决方案是利用iframe监听内容区域变化，动态调整按钮宽度。通过在内容区域插入iframe，并添加事件监听器，在iframe大小改变时，获取外层容器宽度并赋值给按钮区域，实现了宽度的同步。代码示例展示了具体的实现方式。

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

📢前情提要：

首先我的页面样式如上图，左侧菜单部分可以手动展开/收缩；所以会影响到右侧内容部分的宽度，我目前需要将按钮的地方固定在底部，由于采用了 position: absolute;bottom: 0; 导致width不能继承到父元素的宽度，从而展示超出页面。

解决方案：

通过在内容区域添加iframe ,通过监听iframe，在监听iframe发生变化后，获取内容区域宽度赋值给按钮区域。

上代码：

<div id="page-wrapper">
    <div class="content"></div>
    <iframe ref="iframe" class="iframe"></iframe>
    <div class="btn_wrapper" :style="{'width': setWidth}">
</div>


export default {
    data() {
        setWidth: null,
    },
    mounted() {
        //监听iframe
        this.$refs.iframe.contentWindow.addEventListener('resize', this.getWidth); 
    },
    methods: {
        getWidth() {
            let wrapper = document.getElementById('page-wrapper');
            // 获取外层page-wrapper的宽度 并 赋值给 btn_wrapper
            this.setWidth = window.getComputedStyle(wrapper).width;
        }
    }

}

<style>
    .iframe{
        width: 100%;
        height: 0;
        border: none;
    }

</style>