DeepL(和许多其他网站)可以在第一次运行时在单独的选项卡/窗口上打开,但在后续运行时在相同的单独选项卡/窗口上打开。这就是目标
window.open("https://www.deepl.com/translator", "sameD");
谷歌翻译不能,它总是打开新标签在成功运行,即使窗口相同的名字是
window.open("https://translate.google.com", 'sameG');
为什么谷歌翻译不打开在同一选项卡,它明确不允许吗?它是如何做到的呢?
或者window中是否有其他参数。打开以确保url可以在相同的单独选项卡/窗口打开?
不是解决方案,而是对你所经历的事情的解释:
你已经知道
window.open("https://translate.google.com", 'sameG');
将打开一个名为sameG
的新窗口/选项卡。该调用还将返回该页的window
对象的代理。
这也会将新窗口中的window.opener
设置为调用窗口的window
的代理。
通常使用相同的窗口名称再次调用window.open()
将更新先前打开的窗口以导航到新的URL -正如您在deepl.com
示例中所看到的那样。
但translate.google.com
发送一个
Cross-Origin-Opener-Policy: same-origin-allow-popups
头!这个头确实是一个浏览器安全头,它隔离了新窗口的浏览器上下文,也就是说,window.open()
的返回值不会给你任何进入新打开的窗口的权限,而其中的window.opener
被设置为null
。
另外,这失去了对窗口名称sameG
的引用,因此随后对window.open()
的调用将再次打开一个新窗口,而不是更新已经打开的窗口。
TL;DR:Cross-Origin-Opener-Policy
是这个的原因。
window.open()
方法接受的第二个参数是target
参数,它是正在加载资源的浏览上下文的名称。你可以使用特殊的目标关键字,在本例中是"_self"
:
window.open("https://translate.google.com", "_self")