如何使用JS打开新标签页后在新页面中运行指定脚本

可以实现，但严格受浏览器同源策略约束，分两种场景处理：

场景1：新打开的页面与当前页面同源（同协议、同域名、同端口） #

这种场景下你可以直接获取新标签页的上下文，直接注入并运行脚本，不推荐用你示例里的固定时长setTimeout等待，逻辑不可靠，推荐监听新页面的load事件触发逻辑：

const newTab = window.open('同源页面地址', '_blank');
// 监听新页面加载完成后再执行操作
newTab.addEventListener('load', () => {
  // 示例：给新页面插入自定义脚本
  const customScript = newTab.document.createElement('script');
  customScript.textContent = `
    // 这里写你要在新标签页运行的代码
    console.log('新标签页自定义脚本运行成功');
    document.body.style.backgroundColor = 'lightblue';
  `;
  newTab.document.body.appendChild(customScript);
});

场景2：新打开的页面与当前页面跨源 #

这种场景下出于浏览器安全沙箱限制，你无法直接操作新标签页的DOM和运行时，只有你有权限修改新页面的代码时，才能通过postMessage通信机制实现需求：

当前页（父页）代码： #

const newTab = window.open('跨源页面地址', '_blank');
// 给新页面发送运行脚本的指令
// 生产环境建议等新页面主动发加载完成的消息后再发指令，避免提前发消息丢失
setTimeout(() => {
  // 第二个参数生产环境不要填*，请指定为新页面的实际源，比如'https://your-domain.com'
  newTab.postMessage({
    action: 'runCustomScript',
    params: { /* 自定义参数 */ }
  }, '*');
}, 2000);

新页面提前预埋的代码： #

window.addEventListener('message', (event) => {
  // 生产环境必须校验来源，防止恶意消息触发逻辑
  // if (event.origin !== '父页面的实际源地址') return;
  if (event.data?.action === 'runCustomScript') {
    // 这里执行你要运行的指定脚本
    console.log('收到父页指令，执行自定义脚本', event.data.params);
  }
});

注意事项 #

• 如果用户浏览器开启了弹窗拦截，window.open会被拦截，无法获取新标签页引用，需要提前做兼容处理，比如引导用户手动允许当前站点的弹窗权限。
• 固定时长的setTimeout等待逻辑非常不可靠，受网络波动、设备性能影响，可能出现页面未加载完成就执行脚本报错的问题，优先使用事件监听机制处理。

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