如何将新打开标签页的URL存入localStorage？现有JS代码无效果

核心问题：跨域同源策略限制 #

你打开的是https://google.com这类跨域页面，浏览器的同源策略会禁止父页面访问跨域子窗口的onload事件、location.href等属性，导致回调函数根本不会执行，自然无法向localStorage写入数据。

对应解决方案 #

情况1：新页面是同域名页面 #

如果新打开的页面属于当前域名，你的代码逻辑可正常运行，建议优化为更可靠的事件绑定方式：

function openAndSetUrl(tabName, callback) {
  const newWindow = window.open("/your-local-page.html", tabName);
  
  if (newWindow) {
    // 用addEventListener替代onload，避免覆盖其他事件监听
    newWindow.addEventListener('load', () => {
      const url = newWindow.location.href;
      localStorage.setItem(tabName, url);
      typeof callback === 'function' && callback(url);
    });
  }
}

function openInNewTab(tabName) {
  openAndSetUrl(tabName, (url) => {
    console.log("URL set to:", url);
  });
}

情况2：新页面是跨域页面 #

跨域下无法直接监听子页面加载状态或获取其URL，可通过以下两种方式处理：

方法1：使用postMessage（需子页面配合）

父页面代码：

function openAndSetUrl(tabName, targetUrl, callback) {
  const newWindow = window.open(targetUrl, tabName);
  
  // 监听子页面发来的消息，验证来源防止恶意请求
  window.addEventListener('message', (event) => {
    if (event.origin === new URL(targetUrl).origin) {
      const url = event.data;
      localStorage.setItem(tabName, url);
      typeof callback === 'function' && callback(url);
    }
  });
}

子页面（目标域名下的页面）需添加代码：

window.addEventListener('load', () => {
  // 向父页面发送当前URL，第二个参数填父页面域名，设为*则允许所有域名接收（不推荐）
  window.opener.postMessage(window.location.href, "https://your-parent-domain.com");
});

方法2：监听父页面focus事件（无需子页面配合，仅能获取初始URL）

如果无法修改子页面代码，可通过监听原页面的focus事件尝试获取子窗口URL（跨域下会报错，此时存入初始URL）：

function openAndSetUrl(tabName, targetUrl, callback) {
  const newWindow = window.open(targetUrl, tabName);
  
  if (newWindow) {
    const handleFocus = () => {
      try {
        // 尝试获取子窗口URL，跨域会抛出异常
        const url = newWindow.location.href;
        localStorage.setItem(tabName, url);
        typeof callback === 'function' && callback(url);
      } catch (e) {
        // 跨域无法获取，存入初始URL
        localStorage.setItem(tabName, targetUrl);
        typeof callback === 'function' && callback(targetUrl);
      } finally {
        // 移除监听，避免重复触发
        window.removeEventListener('focus', handleFocus);
      }
    };
    window.addEventListener('focus', handleFocus);
  }
}

额外说明 #

• localStorage是域名隔离的，你存入的数据只会保存在原页面的域名下，和新标签页的域名无关。
• 如果仅需记录打开的初始URL，无需等待新页面加载，直接在window.open后执行localStorage.setItem(tabName, targetUrl)即可。

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