如何判断一个页面是window.open打开的 还是直接打开

背景

我们做需求，有时候会遇见特殊的需求，比如我们一个系统A点击某些操作可以跳转到另一个系统B，此时B系统需要知晓，如果是其他系统跳转过来的，我们展示有功能（OPRATION1）,单独打开的没有(OPRATION1)功能，可以看成按钮等一类的特殊操作

实现

我们可以借助 window.opener来判断是否是跳转过来的，按vue3举例

const fromOpen = ref(window.opener && window.opener !== window);

且不论在此系统进行路由跳转，还是强制刷新页面 fromOpen永远是true即从外部系统跳转过来的

注意事项

• 刷新与复制URL：

  • 即使通过window.open打开的页面被刷新（如F5），window.opener属性仍然会存在。
  • 但是，如果将该页面的URL复制后在新的浏览器标签页或窗口中打开，则新页面的window.opener将是null或undefined，因为它不是通过window.open打开的。

• 浏览器差异：

  • 尽管大多数现代浏览器都遵循相似的行为，但始终建议在不同浏览器中测试以确保兼容性。

• 安全策略：

  • 需要注意的是，浏览器的弹窗拦截功能可能会阻止window.open的调用，从而影响到window.opener的预期行为。确保在允许弹窗的上下文中测试相关功能。

• 其他打开方式：

  • 除了window.open，还有其他方式可以打开新窗口或标签页（如通过用户点击带有target="_blank"属性的链接），但这些方式不会设置window.opener属性。

通过上述步骤和注意事项，可以较为准确地判断一个页面是通过window.open打开的还是直接在当前页面打开的。