页面嵌入ifram，但是iframe内的内容不随页面缩放变化

最新推荐文章于 2024-03-27 18:05:37 发布

贾朝

最新推荐文章于 2024-03-27 18:05:37 发布

阅读量292

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_40778157/article/details/133906264

版权

页面嵌入ifram，但是由于iframe内的内容是px，不随浏览器大小变化自动缩放

解决方式：

父页面内iframe的宽高不再使用rem为单位，采用px嵌入，同时监听浏览器变化（由于双击浏览器顶部，resize监听不到，所以监听iframe外的盒子变化）

<template>
    <div class="iframe03-warp">
        <!-- 标题 -->
        <p class="blue-header al-c font-pingfang">产业监测</p>
        <!-- iframe盒子-->
        <div class="iframe-warp" ref="iframe"></div>
    </div>
</template>

	// 自动计算当前浏览器宽度与原定的rem比例
	function remScale(){
	    let w = document.documentElement.clientWidth;
	    if(w<1366){w=1366};
	    return w/1920
	}
	
    mounted(){
        this.createIframe('iframe0', this.url);
        // 监听iframe盒子大小变化
        this.resizeObserver = new ResizeObserver(entries => {
            this.domChange()
        });
        this.resizeObserver.observe(document.querySelector('.iframe-warp'));
    },
    beforeDestroy() {
        // 离开页面取消监听
        this.resizeObserver.unobserve(document.querySelector('.iframe-warp'));
    },
    methods: {
    	// 自动更新iframe缩放
        domChange() {
            if(!document.querySelector('#diiframe0')) return
            document.querySelector('#diiframe0').style.top = (remScale()-1)*50+ "%";
            document.querySelector('#diiframe0').style.transform= 'translateX(-50%) scale('+remScale()+')';
        },
        createIframe(id,url) {
            var i = document.createElement("iframe");
            i.src = url;
            i.id = "di"+id;
            i.style.border = "0";
            i.style.width = "1864px";
            i.style.height = "960px";
            i.style.position = "absolute";
            i.style.left = "50%";
            i.style.top = (remScale()-1)*50+ "%";
            i.style.transform= 'translateX(-50%) scale('+remScale()+')';
            i.style.overflow = "hidden";
            setTimeout(()=> {
                this.$refs.iframe.appendChild(i);
            }, 100);
        },
    },