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

文章目录

📚实现效果
📚模块实现解析
- 🐇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’，这意味着嵌入的内容将允许填写表单、执行脚本、与相同源进行交互，并允许弹出窗口。