让 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

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

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

相关推荐
yanlele26 分钟前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang45331 分钟前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友35 分钟前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir36 分钟前
vue3.2 前端动态分页算法
前端·算法
烛阴1 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子1 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead2 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界2 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
Xiaouuuuua2 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser3 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app