让 chatgpt 帮你实现一个可以拖动调节高度的 iframe

背景

需要将一个页面以 iframe 的方式嵌入页面，而且还需要能够拖动iframe的上边缘动态调整 iframe 的高度。大概长下面这个样子。

html

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

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 的功能。