如何避免为同一链接创建新选项卡（已在浏览器中打开）

Question

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

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

**如何禁止打开已使用 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) 通过 Sebastian 对类似主题的回答：

    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>