背景
需要将一个页面以 iframe 的方式嵌入页面， 而且还需要能够拖动iframe的上边缘动态调整 iframe 的高度。
大概长下面这个样子。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Iframe</title>
<style>
body, html {
height: 100%;
margin: 0;
}
.iframe-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 300px;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.drag-handle {
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 20px;
background-color: transparent;
cursor: ns-resize;
user-select: none;
}
</style>
</head>
<body>
<div class="iframe-container">
<iframe src="https://example.com"></iframe>
<div class="drag-handle"></div>
</div>
</body>
</html>
js
const dragHandle = document.querySelector('.drag-handle');
const iframeContainer = document.querySelector('.iframe-container');
let isDragging = false;
let startY = 0;
dragHandle.addEventListener('mousedown', (event) => {
isDragging = true;
startY = event.clientY;
event.preventDefault();
});
document.addEventListener('mousemove', (event) => {
if (!isDragging) return;
const deltaY = startY - event.clientY;
const newHeight = iframeContainer.offsetHeight + deltaY;
iframeContainer.style.height = `${newHeight}px`;
startY = event.clientY;
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
这样实现之后，发现拖动 iframe 的上边缘往上调节高度没有问题， 当往下的时候，发现高度无法调整。 看了下是因为往下的时候， 鼠标已经滑动到 iframe 的区域了。此时上面的监听的 mousemove 事件已经不再触发，业绩UI无法正常调节高度了。
修改下代码， 新增一个 mask div， 用来保证鼠标的 mousemove 事件可以持续触发。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Iframe</title>
<style>
body, html {
height: 100%;
margin: 0;
}
.iframe-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 300px;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.drag-handle {
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 20px;
background-color: transparent;
cursor: ns-resize;
user-select: none;
}
.iframe-mask {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
}
</style>
</head>
<body>
<div class="iframe-container">
<iframe src="https://example.com"></iframe>
<div class="drag-handle"></div>
<div class="iframe-mask"></div>
</div>
</body>
</html>
js
const dragHandle = document.querySelector('.drag-handle');
const iframeContainer = document.querySelector('.iframe-container');
const iframeMask = document.querySelector('.iframe-mask');
let isDragging = false;
let startY = 0;
dragHandle.addEventListener('mousedown', (event) => {
isDragging = true;
startY = event.clientY;
iframeMask.style.display = 'block'; // 显示遮罩层
event.preventDefault();
});
document.addEventListener('mousemove', (event) => {
if (!isDragging) return;
const deltaY = startY - event.clientY;
const newHeight = iframeContainer.offsetHeight + deltaY;
iframeContainer.style.height = `${newHeight}px`;
startY = event.clientY;
});
document.addEventListener('mouseup', () => {
isDragging = false;
iframeMask.style.display = 'none'; // 隐藏遮罩层
});
这样之后， 就实现了一个简单的拖动调整 iframe 的功能。
原文链接：https://juejin.cn/post/7267106369858207805 作者：zhongzhong05
