js实现拖动调节宽高的iframe

仲水悦 · 2025-6-6 19:07:56

需求

我有一个用vue3项目实现的ai聊天功能。使用js文件的形式来引入其它项目，具体的表现显示是一个机器人icon，点开就是iframe。但是定死iframe的宽高，就显得不够灵活。所以我打算做一下类似windows窗体那样的拖拽调整宽高。具体代码也借助了chat AI，如果完全自己实现还是很耗时间的。
另：实际上这个项目还有多分辨率适配、拖拽移动之类的优化。不过这篇文章只简单说明一下iframe调整宽高。
效果

dom结构

实现思路

拖拽调节宽高实际上是一个还算常见的需求，只不过对于iframe来说需要有一些额外的处理，例如手动添加的在iframe之上的拖拽div，以及拖拽时的遮罩层。
(实际上我第一个想到的css的resize属性，但是效果不好)
1.创建一个包裹iframe的iframe-container，其中包括：iframe、调整宽高用的div、遮罩层div。
2.为每个调整宽高的div添加 mousedown 事件监听器，记录初始位置和尺寸，并且启动遮罩层。

在 mousemove 事件中，根据鼠标移动的距离计算新的尺寸和位置，并更新 iframe 容器的样式。
在 mouseup 事件中，停止调整大小，并隐藏遮罩层

结构展示

让我把上面那些class为"resize-handle"的div改个颜色，就明显多了。

如图所示。我希望用户可以通过左边框、上边框和左上角来拖拽调节大小，所以就是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>

复制代码

上述代码的效果:

最后

我自己的代码写的有点乱(纯js代码)，拿copilot生成的简化代码似乎更乱了，dom的代码还分开写在了body和script中。我看着都有点迷惑了(悲。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册