首页 前端知识 前端html中iframe的基本使用

前端html中iframe的基本使用

2024-05-09 10:05:18 前端知识 前端哥 739 967 我要收藏

以下是一个比较复杂的 <iframe> 示例,展示了如何加载外部页面、控制样式和与 <iframe> 中加载的文档进行通信:

<!DOCTYPE html>
<html>
<head>
  <style>
    .iframe-container {
      position: relative;
      width: 100%;
      height: 500px;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="iframe-container">
    <iframe src="https://www.example.com" frameborder="0" width="100%" height="100%"></iframe>
    <div class="overlay">Loading...</div>
  </div>

  <script>
    const iframeRef = document.querySelector('iframe');
    const overlay = document.querySelector('.overlay');
    // 监听iframe加载完成的load事件
    iframeRef.addEventListener('load', function() {
      overlay.style.display = 'none'; // 移除loading
    });
    
    function sendMessageToIframe() {
      const message = 'Hello from parent window!';
      // 通过通过父窗口找到子窗口的window, 再向子窗口发送消息。
      iframeRef.contentWindow.postMessage(message, '*');
    }
    // 父窗口 监听子窗口发出的消息(如果有;不是上面那行)
    window.addEventListener('message', function(event) {
      if (event.source === iframeRef.contentWindow) {
        const receivedMessage = event.data;
        console.log('Received message from iframeRef:', receivedMessage);
      }
    });
  </script>
</body>
</html>

在上述示例中,我们创建了一个包含 <iframe> 的容器,通过 CSS 控制容器的样式和尺寸。同时,我们添加了一个覆盖层(overlay),用于在 <iframe> 加载期间显示加载信息。

在上面的代码片段中,iframeRef 是父窗口(当前窗口)中的一个引用,通过 iframeRef.contentWindow 可以访问到子窗口的 window 对象。

因此,postMessage的作用是 父窗口向子窗口发送了一条消息。

在这种情况下,父窗口是通过 <iframe> 元素嵌入子窗口的,可以通过 iframeRef 元素的 contentWindow 属性来访问子窗口的 window 对象,并与子窗口进行通信。

在 JavaScript 部分,我们使用事件监听器和 postMessage() 方法实现了与 <iframe> 中加载的文档的通信。具体来说:

  1. 通过监听 <iframe>load 事件,当页面加载完成时,隐藏覆盖层,显示 <iframe> 中加载的内容。

  2. 在父窗口中定义了一个名为 sendMessageToIframe() 的函数,用于向 <iframe> 发送消息。

  3. 在父窗口中监听 message 事件,当接收到来自 <iframe> 的消息时,打印消息内容。

需要注意的是,由于跨域安全策略的限制,父窗口只能与同源的 <iframe> 进行通信。此示例中的通信是在同一个域名下进行的,因此没有出现跨域问题。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7645.html
标签
iframe
评论
会员中心 联系我 留言建议 回顶部
复制成功!