javascript - 如何避免为同一链接创建新选项卡(已在浏览器中打开)

Question

我的仪表板是一个包含许多图 block 的网格，每个图 block 都有一个指向不同页面的链接。

每次我单击该链接时，它都会创建一个新选项卡，即使是之前打开的链接也是如此。

**如何禁止使用 Angular 在浏览器中打开的链接打开新选项卡？

注意:外部链接不应在当前打开仪表板的选项卡上打开**

我在脚本文件中使用了以下代码

  $scope.openInNewWindow = function(url, $event) {
    $window.open(url);
    $event.preventDefault();
  }

并且，我使用以下方式调用它:

<a class="ui-button ui-button-stretch" ng-href="{{link.url}}" ng-click="openInNewWindow(link.url, $event)">

Answer 1

在普通 HTML 中，如果您始终为尝试包含在同一选项卡中的每个链接提供相同的 target (不包括“_blank”)属性，则它应该始终位于同一选项卡/窗口中(如果用户尚未关闭它)。如果他们离开该选项卡/窗口然后再次单击链接，这可能会出现问题 - 他们可能没有注意到旧选项卡/窗口重新加载了内容，具体取决于浏览器如何处理链接的加载/聚焦。

抛开这个问题...在脚本中使用 target="_blank"或 window.open() 不是您想要做的...您想要使用类似 target="resource1", target="resource2 的东西“对于您希望保留在其自己的选项卡/窗口中的每个唯一 URL。

您可以使用它作为您想要做的事情的基础。

使用 Angular，您可能需要使用指令...并且可能会删除 ng-click 属性。可能的示例改编自(Conditionally add target="_blank" to links with Angular JS)，通过塞巴斯蒂安对类似主题的回答:

    module.directive('myTarget', function () {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          var href = element.href;
          if(href == "/resource1.html") { // replace with your conditions to match your urls
            element.attr("target", "resource1");
          else if( href == "/resource2.html")
            element.attr("target", "resource2"); // etc.
          }
        }
    };
});

用法:

<a href="/resource1.html" my-target>Link</a>