extjs process devise vue基础教程 sql视频教程 python程序界面 oracle添加索引 java接收数组 python日期转时间戳 python类和对象 random函数用法 python正则匹配数字 python运行 java简介 java发邮件 java表达式 java入门学习 java学习平台 java中float java如何配置环境变量 java系统时间 python源码下载 java游戏开发教程 怪物猎人ol捏脸数据 端口关闭工具 修改tomcat端口 html5网页制作 kmservice 滑动门代码 win10有几个版本 微信砍价活动怎么做 经典雅黑 勇敢者的游戏3 igfxpers cad文件 类似迅雷的下载软件 未来教育考试系统 ps错误16 zepto下载 只狼月隐糖
当前位置: 首页 > 学习教程  > 编程语言

postMessage --iframe父子窗口之间的数据通信

2020/9/19 16:25:35 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

如果你有使用iframe,那么肯定使用过或听过postMessage。这个API并没什么难度可言,就是一般很少使用,等到需要用时又容易忘记怎么使用,在此做个备忘吧。

父窗口文件:iframe_parent.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <h6>父窗口</h6>
  <div>
    <input id="input" type="text">
    <button id="send">发消息给子窗口</button>
  </div>
  <p>子窗口的消息:<span id="message"></span></p>
  <br>
  <iframe id="iframe" src="iframe_child.html" frameborder="1"></iframe>

  <script>
    const $ = (s) => {return document.querySelector(s)}
    const btn = $('#send')
    const input = $('#input')
    const message = $('#message')
    const iframe = $('#iframe')

    btn.onclick = () => {
      const data = input.value
      data && sendMessage(data)
    }

    function sendMessage(data) {
      iframe && iframe.contentWindow.postMessage(data)
    }

    window.addEventListener('message', (event) => {
      message.innerHTML = event.data
      // 此处不能再给子窗口发消息,不然会死循环
      // event.source.postMessage(`收到${event.data}了`)
    })
  </script>
</body>
</html>

子窗口文件 iframe_child.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background: #eee;
    }
  </style>
</head>
<body>
  <h6>子窗口</h6>
  <div>
    <input id="input" type="text">
    <button id="send">发消息给父窗口</button>
  </div>
  <p>
    父窗口的消息: <span id="message"></span>
  </p>

  <script>
    const $ = (s) => {return document.querySelector(s)}
    const btn = $('#send')
    const input = $('#input')
    const message = $('#message')
    const parent = window.parent

    btn.onclick = () => {
      const data = input.value
      data && sendMessageToParent(data)
    }

    window.addEventListener('message', (event) => {
      console.log('父窗口===', event.source)
      console.log('来自父窗口的消息===', event.data)
      message.innerHTML = event.data
      event.source.postMessage(`收到(${event.data})了`)
    })

    function sendMessageToParent (data) {
      parent && parent.postMessage(data)
    }

  </script>
</body>
</html>

参考

  • window.postMessage:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

本文链接: http://www.dtmao.cc/news_show_200412.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?