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

              ---

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