Question

方案

打开新标签（http://example.com/slave）。进入控制台：

const getShortMessages = messages => messages
  .filter(obj => obj.message && obj.message.length <= 50)
  .map(obj => obj.message);

打开新标签（http://example.com/master）。添加HTML：

window.name = "example-slave"

预期效果

添加的链接应该在第一个标签（example-slave）中打开example.com。

当前效果

添加的链接正在打开新窗口，然后每次额外点击都会在此窗口中打开example.com。

问题

这是正常的吗？是否有可能获得预期效果？

Answer 1

请参阅the specification：

如果给定的浏览上下文名称不是_blank并且存在名称与给定浏览上下文名称相同的浏览上下文，并且当前浏览上下文熟悉该浏览上下文，并且用户代理确定两个浏览上下文足够相关，如果它们相互接触就可以，那么浏览上下文必须是所选择的。

您的方案存在的问题是用户使用浏览器控件打开了两个浏览上下文。他们彼此之间并不熟悉，根本不相关，因此他们无法相互修改。

要使它们相关，您需要使用target或window.open()打开另一个。

Answer 2

我认为您呈现的场景不可能，因为它需要一个跨窗口，跨源的全局上下文，其中窗口名称将被共享并暴露给命名冲突。例如，一个网站出于任何原因命名其窗口（例如Facebook），如果知道该名称可以将目标设置为该名称，从而使用户不情愿地离开其他网站。

您最好的选择是依靠使用window.open创建新窗口，保持参考并更改窗口的location.href：

<强> HTML：

<a href="/?something" target="mytarget">Open a link in new window</a> 
<a href="/?anotherthing" target="mytarget">Open a link in opened window</a>

<强> JS：

var targetlinks = document.querySelectorAll('[target="mytarget"]');

var opentarget = function(e){
    if( "mytarget" in window ){
         mytarget.location.href = e.target.href;   
    }
    else {
         window.mytarget = window.open( e.target.href, 'mytarget' );   
    }
    e.preventDefault();
};

[].slice.call( targetlinks ).forEach( function(link){
    link.addEventListener('click', opentarget );
});

（由于框架的原因，无法在jsfiddle中运行，但在本地Web服务器上运行正常）。

可以使用target和window.name吗？

2 个答案: