前端 | iframe框架标签应用（二）| 外部页面导入

news2025/1/15 14:02:09

文章目录

📚实现效果
📚模块实现解析
- 🐇html
- 🐇css
- 🐇javascript

📚实现效果

点击右上角喇叭，弹出iframe页面框，链接bilibili白噪音视频页面；点击关闭按钮，关闭弹出框。

📚模块实现解析

🐇html

放一个按钮位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>白噪音喇叭</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main id="board">
        <!-- 白噪音 -->
        <button id="openBtn"></button>
    </main>
</body>
<script src="./js/music.js"></script>
</html>

🐇css

背景面板：全屏布局 + 背景色#F1EEE7。

播放按钮：喇叭形按钮 + 按钮在悬停时会有放大效果。

* {
    padding: 0;
    margin: 0;
}

#board {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #F1EEE7;
}

/* #region白噪音 */
#openBtn {
    position: absolute;
    top: 4vh;
    right: 2vw;
    padding: 10px 20px;
    width: 50px;
    height: 50px;
    background-image: url(./src/唱片机.png);
    background-size: cover;
    border: none;
    cursor: pointer;
    transform: scale(0.9);
}

#openBtn:hover {
    transform: scale(1.0);
}
/* #endregion白噪音 */

🐇javascript

实现功能：

在点击白噪音喇叭按钮时，创建一个播放B站白噪音视频的iframe，并添加一个关闭按钮。
点击关闭按钮会移除这个iframe和关闭按钮本身。

// 当按钮被点击时执行以下函数
document.getElementById('openBtn').addEventListener('click', function() {
    // 检查是否已存在iframe和关闭按钮，如果存在则移除它们
    const existingIframe = document.querySelector('iframe');
    const existingCloseButton = document.querySelector('.close-button');
    if (existingIframe) {
        document.body.removeChild(existingIframe);
    }
    if (existingCloseButton) {
        document.body.removeChild(existingCloseButton);
    }

    // 创建一个新的iframe元素
    const iframe = document.createElement('iframe');
    // 设置iframe的src属性为Bilibili视频的地址
    iframe.src = `https://www.bilibili.com/video/BV1wL411M7m9?p=2`;
    // 设置iframe的sandbox属性
    iframe.sandbox='allow-forms allow-scripts allow-same-origin allow-popups';
    // 设置iframe的样式
    iframe.style.position = 'fixed';
    iframe.style.top = '3%';
    iframe.style.left = '10%';
    iframe.style.width = '80%';
    iframe.style.height = '94%';
    iframe.style.border = '2px solid #bfc1a9';
    iframe.style.zIndex = '9999';
    iframe.style.borderRadius = '10px'; 
    // 将iframe添加到页面中
    document.body.appendChild(iframe);

    // 创建并设置关闭按钮
    const closeButton = document.createElement('button');
    closeButton.textContent = '×';
    closeButton.classList.add('close-button');
    closeButton.style.position = 'fixed';
    closeButton.style.width = '20px';
    closeButton.style.height = '20px';
    closeButton.style.top = '3%';
    closeButton.style.right = '7%';
    closeButton.style.zIndex = '10000';
    closeButton.style.border = '1.2px solid #bfc1a9';
    closeButton.style.borderRadius = '50%'; 
    closeButton.style.fontFamily = 'serif';
    closeButton.style.fontSize = '15px';
    closeButton.style.color = 'white';
    closeButton.style.fontWeight = 'bold';
    closeButton.style.padding = '2px';
    closeButton.style.backgroundColor = '#d24735';
    // 为关闭按钮添加点击事件，点击时移除iframe和关闭按钮
    closeButton.addEventListener('click', () => {
        document.body.removeChild(iframe);
        document.body.removeChild(closeButton);
    });
    // 将关闭按钮添加到页面中
    document.body.appendChild(closeButton);
});

iframe元素的sandbox属性用于设置一个或多个安全特性，以限制嵌入的内容在其自己的上下文中的操作。
sandbox属性设置为’allow-forms allow-scripts allow-same-origin allow-popups’，这意味着嵌入的内容将允许填写表单、执行脚本、与相同源进行交互，并允许弹出窗口。