js实现拖动调节宽高的iframe
需求我有一个用vue3项目实现的ai聊天功能。使用js文件的形式来引入其它项目，具体的表现显示是一个机器人icon，点开就是iframe。但是定死iframe的宽高，就显得不够灵活。所以我打算做一下类似windows窗体那样的拖拽调整宽高。具体代码也借助了chat AI，如果完全自己实现还是很耗时间的。
另：实际上这个项目还有多分辨率适配、拖拽移动之类的优化。不过这篇文章只简单说明一下iframe调整宽高。
效果
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/89d49aeff05b400baeb9d8d8d2145bc1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTTFwaGE=:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMTE0ODM1MzM5NTgyNTg4NSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1737085748&x-orig-sign=iydT%2FpuimsQaTwYGGk3apyXN8Oc%3D
dom结构
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/43678c3083374edca159c5338f221bf9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTTFwaGE=:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMTE0ODM1MzM5NTgyNTg4NSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1737085748&x-orig-sign=9WD2fOb3vx2Xp%2FYYpTCsIOmbhLc%3D
实现思路
拖拽调节宽高实际上是一个还算常见的需求，只不过对于iframe来说需要有一些额外的处理，例如手动添加的在iframe之上的拖拽div，以及拖拽时的遮罩层。
(实际上我第一个想到的css的resize属性，但是效果不好)
1.创建一个包裹iframe的iframe-container，其中包括：iframe、调整宽高用的div、遮罩层div。
2.为每个调整宽高的div添加 mousedown 事件监听器，记录初始位置和尺寸，并且启动遮罩层。
[*]在 mousemove 事件中，根据鼠标移动的距离计算新的尺寸和位置，并更新 iframe 容器的样式。
[*]在 mouseup 事件中，停止调整大小，并隐藏遮罩层
结构展示
让我把上面那些class为"resize-handle"的div改个颜色， 就明显多了。
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/f0bb774957434f0e834eba9035beef3a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTTFwaGE=:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMTE0ODM1MzM5NTgyNTg4NSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1737085748&x-orig-sign=dwd%2B8F1jAJDPG%2FEoFzTATspm2ic%3D
如图所示。我希望用户可以通过左边框、上边框和左上角来拖拽调节大小，所以就是class为"t"、"l"、"lt"的div在图片中涂成了黑色(注意class为"rb"的div实际上被我display: none了，这原本是右下角的div)。
注：t = top, l = left。
让copilot帮我生成的简单代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable Iframe</title>
</head>
<body>
<iframe id="resizableIframe"src="https://www.example.com"></iframe>
</body>
</html>上述代码的效果:
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/ef08ca94ebcf426191bf2a0430e0e672~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTTFwaGE=:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMTE0ODM1MzM5NTgyNTg4NSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1737085748&x-orig-sign=N0gC2cyiwChOnwhRoduSbZ8ml44%3D
最后
我自己的代码写的有点乱(纯js代码)，拿copilot生成的简化代码似乎更乱了，dom的代码还分开写在了body和script中。我看着都有点迷惑了(悲。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]