iframe内嵌网页自适应缩放 以展示源网页的比例尺寸

需求:这是我最近开发的低代码平台遇到的需求 ,要求将配置好的应用在弹框中预览(将预览网页内嵌入弹框中) 但是内嵌进入后 他会截取一部分(我源网站网页尺寸 是1980x1080 或者 3060X2160等等)  但是我这个dialog弹框只有我自定义的1000多px的宽高 他只会展示我iframe网页的一部分

需求描述清楚了 现在来说解决方法

我们可以使用 iframe 的 @load方法 来控制iframe内嵌网页的缩放 以达到我们想实现的效果

前提是必须要知道  1.内嵌网页的高宽!!!(一般都是一个展示列表 点击预览 写接口的时候可以将数据塞进数据列表中)     2.弹框的高宽(这个自己可以自定义)

//html<el-dialog title="预览" id="preview-box" :visible.sync="previewObj.previewVisible" :close-on-click-modal=false:before-close="preViewHandleClose"><div class="title" slot="title" style="height: 20px;"><span>{{ previewObj.title }}</span></div><div class="bottom-content"><iframe :src="previewObj.urlValue" id="bi_iframe" frameborder="0" @load="adjustIframe"></iframe></div></el-dialog>//datapreviewObj: {//标题title: '',//控制弹框显示隐藏previewVisible: false,//iframe地址urlValue: null,//内嵌地址的宽高widthValue: 0,heightValue: 0,}//方法
//1.点击预览方法   // 预览 拿到需要的值lookFn(item) {this.previewObj.previewVisible = truethis.previewObj.widthValue = item.widththis.previewObj.heightValue = item.heightthis.previewObj.title = item.namevar url = "windowPreview.html";var urlWithParams = url + "?appKey=" + encodeURIComponent(item.appkey) + "&appId=" + encodeURIComponent(item.id);this.previewObj.urlValue = urlWithParams}//2.  //iframe load事件adjustIframe() {var iframe = document.getElementById('bi_iframe');// 获取父级容器的宽高  //也就是弹框在样式中设置的高宽 最好给固定值 在这里可以直接拿到 var containerWidth = 1145;var containerHeight = 600;// 计算缩放比例  var scaleWidth = containerWidth / this.previewObj.widthValue;var scaleHeight = containerHeight / this.previewObj.heightValue;var scale = Math.min(scaleWidth, scaleHeight); // 选择较小的缩放比例以保持宽高比  // 应用缩放和定位  iframe.style.transformOrigin = 'top left';iframe.style.transform = `scale(${scale}) translate(-50%, -50%)`;// 如果需要,可以调整iframe的宽高以匹配容器  // 但由于我们使用了scale,所以通常不需要这样做  iframe.style.width = `${this.previewObj.widthValue}px`;iframe.style.height = `${this.previewObj.heightValue}px`;},//样式
<style lang="scss">
#preview-box {.el-dialog {width: 1145px;}.el-dialog__body {padding: 0px;overflow: hidden;/* 隐藏超出容器的内容 */position: relative;/* 用于定位iframe */}.el-dialog__header {color: #fff;}
}.bottom-content {width: 100%;height: 600px;position: relative;iframe {width: 100%;/* 初始宽度设置为100% */height: 100%;/* 初始高度设置为100% */border: none;position: absolute;top: 50%;left: 50%;/* 初始不应用缩放 */transform: none;transition: transform 0.3s ease;/* 可选的过渡效果 */}
}
</style>

最后实现效果就是

3840

1920

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/845237.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux - 磁盘管理1

1.磁盘的分区 1.1 磁盘的类型&#xff08;标签&#xff09; MBR&#xff1a; ① 最大支持2T以内的硬盘 ② 有主分区p 拓展分区e 逻辑分区l之分 > 主分区编号1-4&#xff0c;主分区可以格式化使用 拓展分区编号1-4&#xff0c;拓展分区不能格式化 拓展分区最多能有1个&…

C++11中的新特性(2)

C11 1 可变参数模板2 emplace_back函数3 lambda表达式3.1 捕捉列表的作用3.2 lambda表达式底层原理 4 包装器5 bind函数的使用 1 可变参数模板 在C11之前&#xff0c;模板利用class关键字定义了几个参数&#xff0c;那么我们在编译推演中&#xff0c;我们就必须传入对应的参数…

Leetcode:Z 字形变换

题目链接&#xff1a;6. Z 字形变换 - 力扣&#xff08;LeetCode&#xff09; 普通版本&#xff08;二维矩阵的直接读写&#xff09; 解决办法&#xff1a;直接依据题目要求新建并填写一个二维数组&#xff0c;最后再将该二维数组中的有效字符按从左到右、从上到下的顺序读取并…

umijs+react+ts项目代码一片红处处报错解决

报错问题现象 1、在没有 "node" 模块解析策略的情况下&#xff0c;无法指定选项 "-resolveJsonModule"。 2、类型“JSX.IntrinsicElements”上不存在属性“div”。 解决办法 试了很多都没用&#xff0c;最后是参考这位朋友的解决了 vitevue3搭建工程标…

一个HL7的模拟工具

这个模拟器是为了过&#xff08; NIST美国国家标准与技术研究院&#xff08;National Institute of Standards and Technology&#xff0c;NIST&#xff09;的电子病历住院部分的认证而写的。 用途说明 inpatient中的lab order信息通过该工具向实验室转发该信息。并将实验室…

cesium学习6-相机camera

视角设置 viewer.camera.setView({destination:Cesium.Cartesian3.fromDegrees(118.0658439,24.5915414,2500),//目的地orientation:{heading:Cesium.Math.toDegrees(0),//左右平移0pitch:Cesium.Math.toDegrees(90),//上下点头90roll:Cesium.Math.toDegrees(0),//歪头0}}) 相机…

解析Java中1000个常用类:Deprecated类,你学会了吗?

在 Java 编程中,随着技术的发展和代码库的演进,旧的方法、类或接口可能会逐渐被新的替代方案取代。为了管理这些过时的代码,Java 提供了 @Deprecated 注解。 本文将深入探讨 @Deprecated 注解的功能、用法、实际应用中的注意事项,以及如何有效地管理和替换过时的代码。 @…

linux-gpio

在Linux shell中测试GPIO通信&#xff0c;通常需要使用GPIO的设备文件&#xff0c;这些文件通常位于/sys/class/gpio目录下。要使用特定的GPIO引脚&#xff0c;比如GPIO92&#xff0c;你需要执行以下步骤&#xff1a; 导出GPIO引脚&#xff1a;首先&#xff0c;需要确保GPIO92已…

Window系统安装Docker

因为docker只适合在liunx系统上运行&#xff0c;如果在window上安装的话&#xff0c;就需要开启window的虚拟化&#xff0c;打开控制面板&#xff0c;点击程序&#xff0c;在程序和功能中可以看到启动和关闭window功能&#xff0c;点开后&#xff0c;找到Hyper-V&#xff0c;Wi…

堆排序-普通建堆与线性建堆的比较

前言 个人小记 一、代码如下 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <time.h> #define MAX_COUNT 100000000 #define father(i) ((i)/2) #define left(i) ((i)*2) #define right(i) ((i)*2)1 #define TEST(func,a…

centos 7 编译安装 php-8.2.19

1.、安装编译工具及库文件&#xff08;使用yum命令安装&#xff09; yum install -y apr* autoconf automake bison bzip2 bzip2* cloog-ppl cpp curl curl-devel fontconfig fontconfig-devel freetype freetype* freetype-devel gcc gcc-c gtk-devel gd gettext gettext-de…

Vue3实战笔记(55)—Vue3.4新特性揭秘:defineModel重塑v-model,拥抱高效双向数据流!

文章目录 前言defineModel() 基本用法总结 前言 v-model 可以在组件上使用以实现双向绑定。 从 Vue 3.4 开始&#xff0c;推荐的实现方式是使用 defineModel() 宏 defineModel() 基本用法 定义defineModel()&#xff1a; <!-- Child.vue --> <script setup> con…

Conditional DETR解读---带anchor的DETR

DETR存在的问题 1.收敛速度慢 2.对小目标物体检测效果不好&#xff0c;因为transformer计算量大&#xff0c;受限于计算规模&#xff0c;CNN提取特征时只采取了最后一层特征&#xff0c;没有用FPN等结构。所以对于小目标检测效果不好。 论文主要观点 通过对DETRdecoder中的a…

华为昇腾910B性能及应用场景

华为昇腾910B是一款高性能的人工智能处理器芯片&#xff0c;以下是其性能参数及应用的相关信息&#xff1a; 一、性能参数 制造工艺&#xff1a;昇腾910B采用了先进的7nm工艺制程&#xff0c;确保了其高效能低功耗的特性。核心数量&#xff1a;集成了数千个处理核心&#xff…

【退役之Java面试经历】第一次面试记录和复盘, Action!

一、简历 两段工作经历&#xff0c;四个项目 二、面试 技术面试 总体还行&#xff0c;关于 redis 和 rabbitmq 以及 spring boot&#xff0c;spring cloud 的知识&#xff0c;回答得还可以。但是&#xff0c;还问到了 “单点登录”、“撰写需求分析文档和操作手册”等盲点。…

代码随想录训练营Day 45|力扣1049. 最后一块石头的重量 II、494. 目标和、474.一和零

1.最后一块石头的重量2 视频讲解&#xff1a;动态规划之背包问题&#xff0c;这个背包最多能装多少&#xff1f;LeetCode&#xff1a;1049.最后一块石头的重量II_哔哩哔哩_bilibili 代码随想录 代码&#xff1a; class Solution { public:int lastStoneWeightII(vector<int…

芋道系统,springboot+vue3+mysql实现地址的存储与显示

1.效果图 2.前端实现&#xff1a; <el-form-item label"地址" prop"entrepriseAddress"><el-cascaderv-model"formData.entrepriseAddress"size"large":options"region"/></el-form-item> //导入组件 im…

k8s中pod如何排错?

排除Kubernetes Pod故障通常涉及一系列步骤&#xff0c;以诊断问题并找到解决方案。以下是一些常见的故障排除方法&#xff1a; 检查Pod状态: 使用kubectl get pods查看Pod的状态。如果Pod没有处于Running状态&#xff0c;查看更详细的信息&#xff0c;使用kubectl describe …

【JMeter接口自动化】第7讲 Jmeter三个重要组件

线程组:是JMeter中最基本的元素之一&#xff0c;用于模拟并发用户访问目标系统。线程组定义了测试计划中的用户数量、用户行为和用户请求之间的关系。 添加方法:测试计划->添加->线程(用户)->线程组 在线程组中&#xff0c;您可以设置以下参数&#xff1a; 线程数&a…