跨域相关概念

1、domaain属性

该属性是一个只读的字符串，用来得到当前网页的域名。

console.log(document.domain)
// www.jianshu.com

2、域名

什么是域名

域名：可分三级，一级域名，二级域名，三级域名。是由一串字符+域名后缀组成，我们通常说的网址就包含域名。常见域名后缀：.com、.cn、.top、net、.在线、.xin、.shop、.ltd

域名分类

一级域名：又叫顶级域名，一串字符串中间一个点隔开，例如baidu.com，这里说明一下，www.baidu.com不是一级域名！！而是二级域名！
二级域名：实际上就是一个一级域名以下的主机名，一串字符串中间两个“.”隔开，例如xxx.baidu.com（"pan"就是主机名）。
三级域名：二级域名的子域名，特征是包含三个“.”，一般来说三级域名都是免费的。

域名与IP的关系

因为在网络上机器彼此连接只能互相识别IP，而数字标识较难记忆，所以才演化出域名来代替IP地址，当我们将在地址栏输入域名欲跳转到某个页面时，点击提交后会由专门的域名解析服务器（DNS服务器）对我们的域名进行解析，得出域名对应的IP地址再进行连接。所以如果我们直接在地址栏输入与域名对应的IP也可以跳转到同一个页面。

3、H5 postMessage

背景

在当前页面打开一个新的窗口，当这个新窗口的页面中的数据发生变化时，需要对上一个窗口的页面状态进行一些调整,这个需求与事件监听非常类似，都是触发了某个事件时执行某个动作。但是一般这种监听（或者订阅、广播）都只能在同一个页面中，并不能够跨窗口，为了解这个问题H5提出postMessage API

postMessage 发送数据

在 html5，window 对象上有一个方法叫做postMessage，与它的名字一样，这个方法就是用来发送信息的，但是它只能用来在两个窗口之间发送信息

win.postMessage(data, origin)

参数解读

win 需要接受消息的 window 对象

当我们通过 window.open() 打开一个新窗口时，会返回一个新窗口的 window 对象，通过这个新窗口的 window 对象，就可以向新窗口发送消息,如果页面中有 iframe 时，也可以通过这个 iframe 对象发送消息

data 要发送的数据

理论上 data 可以是任何可以被复制的数据类型，但是由于部分浏览器只支持传输 String 类型，所以传输的数据最好是通过 JSON.stringify() 序列化后再传输

origin 为目标窗口的源

origin 为字符串，为目标窗口的源，由协议+域名+端口号组成,如果想要传递给任意窗口，可以将这个参数设置为 * ，为了安全起见，不建议设置为 *

如果目标窗口与当前窗口同源，则设置为 /

message 接收数据

window.addEventListener('message', function (event) {...})

参数解读

message 事件监听器的类型

'message' 表示会监听当前窗口接收到的消息

回调函数

在回调函数中，我们可以对发送消息的源进行一些验证，从而保证安全性.

回调函数的参数event 的属性

origin 表示发送消息窗口的源
source 属性表示发送消息的窗口

通过 e.source == window.opener 可以判断发送消息的窗口与打开当前页面的窗口是否为同一个

data 属性标书传递过来的数据

详细例子

// parent.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>parent</title>
</head>
<body>
  <h3>parent</h3>
  <p>
    <span>新窗口传递的信息:</span>
    <span id="childInfo"></span>
  </p>
  <a href="javascript:;" id="post">新窗口</a>
  <script>
    document.getElementById("post").onclick = () => {
      // 打开新窗口
      let subWindow = window.open("child.html")
      // 监听 message 事件
      window.addEventListener("message", (e) => {
        console.log(e)
        // 校验发送消息的窗口的源
        const originAddress = 'http://127.0.0.1:5500'
        if (e.origin != originAddress) 
            return
        document.getElementById("childInfo").innerText = e.data
      })
    }
  </script>
</body>
</html>

// child.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>child</title>
</head>
<body>
<h3>child</h3>
<script>
  // 通过 window.opener 获取到打开当前窗口的窗口，即 super window
  // 由于当前是同源窗口传递消息，所以第二个参数设为 /
  window.opener.postMessage('我是新窗口传递的消息', '/')
  // 也可以写成目标地址
  // window.opener.postMessage('我是新窗口传递的消息', 'http://127.0.0.1:5500')
</script>
</body>
</html>