How to avoid creating new tabs for the same link(already opened in the browser)

Question

My dashboard is a grid with many tiles with each tile having a link to a different page.

Every time I click the link it creates a new tab even for the link which was opened previously.

**How do I suppress the opening of new tabs for the links which are already opened in the browser using Angular ?

Note: The external links should not open on the tab where dashboard is currently opened**

I have used the following code in my script file

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

And, I call it using :

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

score 1 · Answer 1 · edited May 23 '17 at 11:47

In vanilla HTML if you always give the same target (not counting "_blank") attribute for each link your trying to contain in the same tab, it should always land in the same tab/window (if the user hasn't closed it). This can be problematic if they leave that tab/window and then click the link again-- they may not notice the old tab/window reloaded the content depending on how the browser handles the loading/focusing of the link.

That issue aside... using a target="_blank" or window.open() in script is not what you want to do... You want to use something like target="resource1", target="resource2" for each unique URL you want to stay in its own tab/window.

You can use this for the basis of what you're trying to do.

With Angular you'll probably want to use a directive... and possibly drop your ng-click attribute. Possible example adapted from (Conditionally add target="_blank" to links with Angular JS) via Sebastian's answer on a similar topic:

    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.
          }
        }
    };
});

Usage:

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

I agree but do think the directive is overkill. Just put target="" on the html tag, more flexible and more understandable for other devs. — Bob Brinks, Jul 27 '16 at 15:09
@Tom Barstow I already have my links stored in the link object(which are links to external websites), which are on the dashboard.html and whenever a user clicks on any link, the user should get it on the new tab and when the user clicks it again (and if the previous tab is open) then the old tab should be reloaded. Can't we do it without introducing a new module ? — Abdul Salam Shaikh, Jul 27 '16 at 18:03
Oh, well from reading your latest comment it sounds like all of the links should go to just a single tab-- I was thinking you wanted x number of tabs dependent on whichever resource was be loading (per unique site/address...) my suggestion now is to what Bob Brinks hinted at and just replace your `ng-click="..."` with `target="myTab"` See if that gets you your desired behavior. — Tom, Jul 27 '16 at 20:46

How to avoid creating new tabs for the same link(already opened in the browser)

1 Answers1