H5中 iframe 元素的使用与 iframe 页面间通信

洋哥登陆

已于 2023-07-15 22:19:29 修改

阅读量1.2k

点赞数

分类专栏： html 文章标签： javascript html5

于 2023-07-15 22:17:38 首次发布

本文链接：https://blog.csdn.net/Peanutfight/article/details/131744777

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

简介

H5中的 iframe 元素是用于在网页中嵌入其他网页或文档的标签。它允许您在当前页面中显示另一个网页的内容，类似于在一个框架内显示另一个网页。

属性

当使用 iframe 元素时，以下是一些常用的属性：

属性	介绍
src	指定要嵌入的网页的URL。可以是本地文件或外部网页的URL。
width	设置iframe的宽度，可以使用像素值（例如：width=“500”）或百分比值（例如：width=“50%”）。
height	设置iframe的高度，可以使用像素值或百分比值。
frameborder	指定是否显示iframe的边框。设置为0表示没有边框，设置为1表示有边框。
scrolling	控制是否显示滚动条。可选值为auto（根据内容自动显示滚动条），yes（始终显示滚动条），no（不显示滚动条）。
sandbox	用于设置iframe的沙盒模式，以增强安全性。可以使用多个值，如allow-same-origin（允许与父页面具有相同的源），allow-scripts（允许运行脚本），allow-forms（允许提交表单）等。
allowfullscreen	指定是否允许iframe在全屏模式下播放视频。

页面间通信

在不同的 iframe 之间进行通信可以使用以下方法：

window.postMessage：window.postMessage 方法允许在不同的窗口或iframe之间发送消息。它接受两个参数：消息内容和目标窗口的源。发送消息的窗口使用 postMessage 方法发送消息，而接收消息的窗口需要监听 message 事件来接收消息。通过使用这种方式，不同的iframe可以相互发送和接收消息，以实现通信。

在发送消息的窗口中：

window.postMessage('Hello from iframe A', 'http://www.example.com');

在接收消息的窗口中：

window.addEventListener('message', function(event) {
  // 检查消息的来源
  if (event.origin === 'http://www.example.com') {
    // 处理接收到的消息
    console.log('Received message: ' + event.data);
  }
});

window.parent 和 window.frames：每个iframe都有一个 window.parent 属性，它可以用来访问包含它的父窗口。通过使用 window.parent 属性，可以在iframe和父窗口之间进行直接的通信。

在子页面中：

window.parent.postMessage('Hello from iframe A', 'http://www.example.com');

在父页面中：

window.addEventListener('message', function(event) {
  // 检查消息的来源
  if (event.origin === 'http://www.example.com') {
    // 处理接收到的消息
    console.log('Received message: ' + event.data);
  }
});

使用共享全局对象：如果不同的iframe是由同一域名下的页面加载的，它们可以共享全局对象来进行通信。在这种情况下，它们可以直接访问共享的全局变量或函数，以便进行通信。

在iframe A中：

// 在全局对象中定义一个函数
window.sharedFunction = function(message) {
  console.log('Received message: ' + message);
};

在iframe B中：

window.parent.sharedFunction('Hello from iframe B');

示例

父页面

<body style="width: 100%;height: auto;margin: 0px;">
  <div style="margin-bottom: 50px;background-color: cornflowerblue; width: 100%; height: 100px;">
    This is parent html !
  </div>

  <!-- scrolling 设置屏幕是否可滑动 -->
  <iframe id="iframe" src="children.html" width="100%" height="auto" frameborder="0" scrolling="no"></iframe>

  <script>
    // 向子页面发送消息
    const iframe = document.getElementById('iframe')
    var href = window.location.href
    href = href.substring(0, href.lastIndexOf('/'))
    iframe.onload = function () {
      console.log('send to children message')
      iframe.contentWindow.postMessage({ message: '这里是父页面的消息', parentUrl: window.location.href }, href + '/children.html');
    }

    // 监听子页面消息
    window.addEventListener('message', e => {
      console.log(e)
      const href = e.source.location.href
      // 有可能会监听到多次消息，所以进行过滤
      if (href.match('children.html')) {
        console.log('listen children message: ', e.data.message)
      }
    })
  </script>
</body>

子页面

<body style="width: 100%;height: auto;margin: 0px;">
  <div style="font-size: 16px; color: #000; background-color: gainsboro; width: 100%; height: 100px;" onclick="handleClick()">
    This is children html !
  </div>
  <script>
    // 监听父页面消息
    window.addEventListener('message', e => {
      const data = e.data
      if (data) {
        console.log('listen parent message', data.message)
      }
    }, false)


    // 向父页面发送消息
    function handleClick() {
      var url = window.location.href
      url = url.substring(0, url.lastIndexOf("/"))
      console.log('send message to parent')
      window.parent.postMessage({message: "这里是子页面"}, url + "/parent.html")
    }
  </script>
</body>