标签页间通信的方法BroadcastChannel API这是实现同源下浏览器不同窗口、Tab页、frame或ifram

这是实现同源下浏览器不同窗口、Tab页、frame或iframe之间简单通信的一种方式。通过创建一个监听某个频道下的BroadcastChannel对象，你可以接收发送给该频道的所有消息。使用postMessage方法发送消息，然后在另一个窗口中使用message事件监听器接收消息。

crossTagMsg.js文件

const channel = new BroadcastChannel("update-data"); //创建频道
function sendMsg(type, context) {
  channel.postMessage({
    type,
    context,
  });
}

function listeMsg(callback) {
  channel.addEventListener("message", (event) => {
    callback && callback(event);
  });
}

index.htm页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas Watermark</title>
    <script src="./crossTagMsg.js"></script>
  </head>
  <style></style>
  <body>
    <ul>
      <li class="song">《我也》（电影《第二十条》推广曲）</li>
      <li class="song">《不眠之夜》</li>
      <li class="song">《离别开出花》</li>
    </ul>
    <script>
      const ele = document.getElementsByClassName("song");

      let hasOpenPage = false;
      listeMsg(function (evnet) {
        
        if (evnet.data.type == "openPage") {
          hasOpenPage = evnet.data.context;
        }
      });

      for (let i = 0; i < ele.length; i++) {
        ele[i].onclick = function () {
          if (hasOpenPage) {
            sendMsg("song", this.innerHTML);
          } else {
            window.open("./jietu.html", "jietu");

            setTimeout(() => {
              sendMsg("song", this.innerHTML);
            }, 500);
          }
        };
      }

      window.addEventListener("unload", function () {
        //页面关闭
        channel.close();
      });
    </script>
  </body>
</html>

jietu.htmly页面

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="./crossTagMsg.js"></script>

<body>
    <div>
    
     <h1 id="mesg"></h1>

    </div>
  
    <script>
      const msgele=  document.getElementById('mesg')
      listeMsg((event)=>{
        console.log('event===1',event)
        msgele.innerHTML=event.data.context
      })
      sendMsg('openPage',true)
     
      window.addEventListener('unload', function () { //页面关闭 
        sendMsg('openPage',false)
      });
    </script>
</body>
</html>