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

文章目录

• 实现效果
• 模块实现解析
• • html
  • css
  • javascript

    实现效果

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

      模块实现解析

      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-findex.php/tags-1038.html" >orms allow-scripts allow-same-origin allow-popups’，这意味着嵌入的内容将允许填写表单、执行脚本、与相同源进行交互，并允许弹出窗口。

              ---

              • 其他iframe框架标签应用案例
                • iframe框架标签应用 | html页面导入