第十六章----HTML5脚本编程_onmessage事件作用-CSDN博客

本文链接：https://blog.csdn.net/h1234561234561/article/details/103518704

一、跨文档消息传递
关于跨文档消息传递，其本质而言是自己利用自己的方法给自己传递消息，只是这个传递的动作是在另外一个window对象中
1）、定义
跨文档消息传递指的是在一个视窗中，不同内嵌的框架(iframe)传递消息

2）、contentWindow属性（相关api介绍）
其内嵌框架的一个代理window对象，既然是代理，就说明它只含有某些方法和属性，并不是正真window对象的完整副本

3）、postMessage和onmessage事件
postMessage事件用于发送消息，在发送消息方框架使用，但是却作用与接受消息框架的代理window对象上（这就是为什么说是自己利用自己的方法给自己传递消息）。存在两个参数，第一个参数为需传递的数据，类型为String；另外一个表明获取消息内嵌框架的域（window.origin），默认允许全部为'*'。
onmessage事件用于接收信息，在内嵌框架中使用，其事件处理程序对象（event）中包含三个参数。data（所需接受的数据），origin（发送方框架所在的域）和source（发送框架的代理window对象）

4）、示例：
postMessage.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>parent</div>
  <button onclick="clickFun()">parentSend</button>
  <iframe src="file:///C:/Users/30863/Desktop/native-test/postMessageChild.html" frameborder="0"></iframe>
  <!-- <iframe src="https://www.baidu.com/" frameborder="0"></iframe> -->
</body>
<script>
  const child = document.getElementsByTagName('iframe')[0]
  function clickFun() {
    child.contentWindow.postMessage('parentData', '*')
  }
  window.addEventListener('message', function(e) {
    const event = e || window.event
    const newNode = document.createElement('div')
    newNode.innerText = event.data
    document.body.append(newNode)
  })
</script>
</html>

postMessageChild.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>child</div>
</body>
<script>
  window.addEventListener('message', function(e) {
    const event = e || window.event
    const newNode = document.createElement('div')
    newNode.innerText = event.data
    document.body.append(newNode)
    event.source.postMessage('recived', '*')
  })
</script>
</html>

二、原生拖放
1）、拖放事件
2）、自定义放置目标
3）、dataTransfer对象
4）、dropEffect和effectAllowed
5）、draggable属性
三、媒体元素
1）、属性
2）、事件
3）、自定义媒体播放器
4）、检测编辑解码器的支持情况
5）、Audio类型
四、历史状态管理