window.open()父子窗口交互

Window 接口的 open() 方法，是用指定的名称将指定的资源加载到新的或已存在的浏览上下文（标签、窗口或 iframe）中。

原理

Window 接口的 open() 方法将 URL 作为参数，并将其识别的资源加载到新的或现有的标签页或窗口中。target 参数决定将资源加载到哪个窗口或标签页，windowFeatures 参数可用于控制打开一个具有最少用户界面功能的新弹出窗口，并控制其大小和位置。

请注意，远程 URL 不会立即加载。当 window.open() 返回时，窗口总是包含 about:blank。URL 的实际获取是延迟进行的，并在当前脚本块执行完毕后开始。窗口创建和引用资源的加载是异步进行的。

  open()
  open(url)
  open(url, target)
  open(url, target, windowFeatures)

参数说明

url 可选:
一个字符串，表示要加载的资源的 URL 或路径。如果指定空字符串（“”）或省略此参数，则会在目标浏览上下文中打开一个空白页。
target 可选
一个不含空格的字符串，用于指定加载资源的浏览上下文的名称。如果该名称无法识别现有的上下文，则会创建一个新的上下文，并赋予指定的名称。还可以使用特殊的 target 关键字：_self、_blank、_parent 和 _top。
该名称可用作 a 或 form 元素的 target 属性。
windowFeatures 可选
一个字符串，包含以逗号分隔的窗口特性列表，形式为 name=value，布尔特性则仅为 name。这些特性包括窗口的默认大小和位置、是否打开最小弹出窗口等选项。支持以下选项：
popup
如果启用此特性，则要求使用最小弹出窗口。弹出窗口中包含的用户界面功能将由浏览器自动决定，一般只包括地址栏。
如果未启用 popup，也没有声明窗口特性，则新的浏览上下文将是一个标签页。

在 windowFeatures 参数中指定除 noopener 或 noreferrer 以外的任何特性，也会产生请求弹出窗口的效果。
要启用该特性，可以不指定 popup 值，或将其设置为 yes, 1 或 true。
例如：popup=yes、popup=1、popup=true 和popup 的结果完全相同。

width 或 innerWidth
指定内容区域（包括滚动条）的宽度。最小要求值为 100。

height 或 innerHeight
指定内容区域（包括滚动条）的高度。最小要求值为 100。

left 或 screenX
指定从用户操作系统定义的工作区左侧到新窗口生成位置的距离（以像素为单位）。

top 或 screenY
指定从用户操作系统定义的工作区顶部到新窗口生成位置的距离（以像素为单位）。

noopener
如果设置了此特性，新窗口将无法通过 Window.opener 访问原窗口，并返回 null。
使用 noopener 时，在决定是否打开新的浏览上下文时，除 _top、_self 和 _parent 以外的非空目标名称会像 _blank 一样处理。

noreferrer
如果设置了此特性，浏览器将省略 Referer 标头，并将 noopener 设为 true。更多信息请参阅 rel=“noreferrer” (en-US) 。

windowFeatures 中要求的位置（top、left）和尺寸（width、height）值，如果其中任何一个值不允许在用户操作系统应用程序的工作区内呈现整个浏览器弹出窗口，则将被更正。换句话说，新弹出窗口的任何部分最初都不能置于屏幕之外。

父窗口向子窗口传值

1. 使用url传值

父窗口：

 var myWindow = window.open('https://example.com?param1=value1&param2=value2', 'MyWindowName', 'width=600,height=400');

子窗口：

var urlParams = new URLSearchParams(window.location.search);
var param1 = urlParams.get('param1'); // 获取 param1 的值
var param2 = urlParams.get('param2'); // 获取 param2 的值
console.log(param1); // 输出 value1
console.log(param2); // 输出 value2

子窗口向父窗口传值

子窗口：

 let item = 1
 window.opener.postMessage({type:'start', 'message':item}, '*');

父窗口接收传值：

window.addEventListener(
      'message',
       (e) => {
             // 传值信息在e里面，在此执行相关方法
          }
         })
   	}, false)