如何从B页面调用并执行A页面中定义的JavaScript函数

默认情况下两个独立的HTML页面的JavaScript运行环境是完全隔离的，无法直接调用对方的函数，需要借助跨页面通信能力实现，以下是几种常用的同域下的实现方案：

方案1：a页面由b页面通过window.open打开/是b的iframe嵌入页 #

这种情况可以直接持有a页面的窗口引用，直接调用挂载在window上的全局函数：

修改b.html代码： #

<!DOCTYPE html>
<html>
<head>
<title>Page B</title>
</head>
<body>

<h1>从此处更新A页面</h1>
<button type="button" class="btn open-page-a">先打开A页面</button>
<button type="button" class="btn update-page-a">更新A页面</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script>
let pageAWindow = null;
// 先打开a页面
$(".open-page-a").on("click", function(){
  pageAWindow = window.open('a.html', 'pageA');
});

$(".update-page-a").on("click", function(){
  // 确保a页面未关闭且已加载完成
  if(pageAWindow && !pageAWindow.closed) {
    pageAWindow.UpdatePageA();
  }
});

</script>
</body>
</html>

注意：因为UpdatePageA是a页面的全局函数，所以直接通过窗口引用即可访问，需要确保两个页面同域。

方案2：两个页面为独立打开的标签页，无父子窗口关系 #

这种情况可以用Broadcast Channel API实现跨标签页通信，是目前最简洁的方案：

修改a.html代码，新增消息监听： #

// 在a.html的script标签中新增
const syncChannel = new BroadcastChannel('page_update_channel');
syncChannel.onmessage = (event) => {
  if(event.data === 'trigger_update_a') {
    UpdatePageA();
  }
}

function UpdatePageA(){
   $("body").css("background-color","gold");
 }

修改b.html的点击事件逻辑： #

const syncChannel = new BroadcastChannel('page_update_channel');
$(".update-page-a").on("click", function(){
  syncChannel.postMessage('trigger_update_a');
});

兼容旧浏览器方案：基于localStorage的storage事件 #

如果需要兼容不支持Broadcast Channel的旧浏览器，可以监听storage事件实现：

a.html新增监听逻辑： #

window.addEventListener('storage', (event) => {
  if(event.key === 'update_page_a_flag' && event.newValue === '1') {
    UpdatePageA();
    // 重置标记，避免后续无法重复触发
    localStorage.removeItem('update_page_a_flag');
  }
});

b.html点击事件逻辑： #

$(".update-page-a").on("click", function(){
  localStorage.setItem('update_page_a_flag', '1');
});

注意事项 #

• 以上所有方案都要求两个页面符合同源策略（协议、域名、端口完全一致），跨域场景下需要借助服务端 Websocket 做消息中转
• 使用window.open方案时，建议等待a页面加载完成后再调用函数，避免出现函数未定义的报错

内容的提问来源于stack exchange，提问作者Behseini