能否‘Subclass’浏览器‘在新标签页中打开’菜单以修改链接？

核心思路 #

问题本质是iframe内的链接默认指向自身页面地址，右键新标签页打开时不会带上外层页面的上下文。最简便的方案是修改iframe内链接的目标地址，让它指向包含该iframe内容的完整外层页面，而非仅iframe自身的URL。

具体实现 #

情况1：iframe与外层页面同域（可直接访问iframe内部DOM） #

在页面加载完成后，监听iframe的load事件，遍历内部所有链接，替换其href为外层页面的完整URL（通过参数指定要加载的iframe内容）：

// 假设页面中只有一个iframe，若多个可循环处理
const iframe = document.querySelector('iframe');
iframe.addEventListener('load', function() {
  const innerLinks = this.contentDocument.querySelectorAll('a');
  innerLinks.forEach(link => {
    // 原链接的完整地址
    const originalUrl = link.href;
    // 构建外层页面的URL，这里假设外层页面路径为"/full-page"，用参数传递iframe要加载的地址
    const fullPageUrl = `${window.location.origin}/full-page?iframe-src=${encodeURIComponent(originalUrl)}`;
    // 替换链接的href
    link.href = fullPageUrl;
    // 可选：设置默认在新标签页打开，不影响右键操作
    link.target = '_blank';
  });
});

同时，外层的/full-page页面需要根据iframe-src参数，动态设置iframe的src属性，确保加载对应的内容。

情况2：iframe与外层页面跨域（无法直接访问内部DOM） #

这种情况需要内外页面配合，通过postMessage通信实现：

1. iframe内部页面代码：监听链接的右键菜单事件，阻止默认行为后，向外层页面发送消息

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    // 发送消息到外层页面，指定要打开的链接地址
    window.parent.postMessage({
      action: 'openFullPage',
      url: link.href
    }, 'https://your-outer-domain.com'); // 替换为实际的外层页面域名，提升安全性
  });
});

2. 外层页面代码：监听message事件，接收消息后打开正确的完整页面

window.addEventListener('message', (e) => {
  // 验证消息来源，避免恶意请求
  if (e.origin !== 'https://your-iframe-domain.com') return;
  
  if (e.data.action === 'openFullPage') {
    const fullPageUrl = `${window.location.origin}/full-page?iframe-src=${encodeURIComponent(e.data.url)}`;
    // 在新标签页打开完整页面
    window.open(fullPageUrl, '_blank');
  }
});

注意事项 #

• 不建议直接“劫持”浏览器原生右键菜单，浏览器的安全限制会导致这种方案兼容性差，且用户体验不佳。修改链接地址是更稳定的方案。
• 跨域场景下必须指定明确的域名作为postMessage的目标，避免使用*，防止安全风险。

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