JavaScript 如何实现同源通信

// 创建一个用于广播的通信通道
const channel = new BroadcastChannel('my_bus');

// 在my_bus上发送消息
channel.postMessage('大家好，我是阿宝哥');

// 监听my_bus通道上的消息
channel.onmessage = function(e) {
  console.log('已收到的消息：', e.data);
};

// 关闭通道
channel.close();

<h3 id="title">你好，</h3>
<input id="userName" placeholder="请输入你的用户名" />

const bc = new BroadcastChannel("abao_channel");

(() => {
  const title = document.querySelector("#title");
  const userName = document.querySelector("#userName");

  const setTitle = (userName) => {
    title.innerHTML = "你好，" + userName;
  };

  bc.onmessage = (messageEvent) => {
    if (messageEvent.data === "update_title") {
      setTitle(localStorage.getItem("title"));
    }
  };

  if (localStorage.getItem("title")) {
    setTitle(localStorage.getItem("title"));
  } else {
    setTitle("请告诉我们你的用户名");
  }

  userName.onchange = (e) => {
    const inputValue = e.target.value;
    localStorage.setItem("title", inputValue);
    setTitle(inputValue);
    bc.postMessage("update_title");
  };
})();

<h3 id="status">当前状态：已登录</h3>
<button onclick="loGout()">退出</button>

const status = document.querySelector("#status");
const logoutChannel = new BroadcastChannel("logout_channel");

logoutChannel.onmessage = function (e) {
  if (e.data.cmd === "logout") {
    doLogout();
  }
};

function logout() {
  doLogout();
  logoutChannel.postMessage({ cmd: "logout", user: "阿宝哥" });
}

function doLogout() {
  status.innerText = "当前状态：已退出";
}

const popup = window.open('https://another-origin.com', ...);
popup.postMessage('Sup popup!', 'https://another-origin.com');

const iframe = document.querySelector('iframe');
iframe.contentWindow.onmessage = function(e) {
  if (e.origin !== 'https://expected-origin.com') {
    return;
  }
  e.source.postMessage('Ack!', e.origin);
};