2

In my Home page, I have one anchor link pointing to a page that I open in new tab. Now this page has a link pointing back to my Home page. So my question is how to target the Home page in its existing tab?

So lets say I have Home page as Home.html with link as PageA.html set as follows - 

<a href="PageA.html" target="pagea">Page-A</a>

This allows me to always open PageA in existing tab if already opened. Now I want to open Home page from this page, so how to set the anchor tag so that it opens the Home page in the already opened tab of Home.html?

So basically user can click a link to open its page in a new tab if it doesn't already exists, but should open the existing tab if it exists. So in the above scenario, max of 2 tabs should be open. This is a requirement for our web portal.

Thanks a lot.

[Edited post to simplify problem with just 2 pages]

user3231682
  • 153
  • 1
  • 6
  • 1
    Sounds like you want to use javascript to communicate between tabs. Check this: http://stackoverflow.com/questions/4079280/javascript-communication-between-browser-tabs-windows Also in my opinion I would rethink your user experience. – The Muffin Man Jul 09 '14 at 19:23
  • What do you mean by "the already open tab?" A link will always open in the current tab if you don't specify a target, and you already have successful code to target a different tab by name, so I'm not sure what you're after. – IMSoP Jul 09 '14 at 19:25
  • Perhaps you are looking for [`window.name`](https://developer.mozilla.org/en-US/docs/Web/API/Window.name)? – IMSoP Jul 09 '14 at 19:31
  • Edited my question - links opening to existing tabs is a requirement for us! I will check the javascript way. – user3231682 Jul 09 '14 at 19:35
  • I still don't get it. You show code which successfully keeps everything in two tabs; why is it any harder to keep everything in three? – IMSoP Jul 09 '14 at 19:40
  • Or is the three tabs thing a red herring, and your problem could equally be described using two: an original page navigated to directly, and a second page opened in a named tab using a `target` attribute? – IMSoP Jul 09 '14 at 19:44
  • The issue is that I can specify target for PageA and PageB and they will then always open in their existing tabs. But what to specify target in PageA/PageB for Home page which loads initially? – user3231682 Jul 09 '14 at 19:45
  • Right, so PageB is irrelevant, you could simplify the problem to Home and PageA? – IMSoP Jul 09 '14 at 19:47
  • Sure. Just mentioned PageB to stress multiple pages can have this. But yes, problem can be simplified to just PageA. Shall i update my question? – user3231682 Jul 09 '14 at 19:51
  • It's always best to stick to the simplest example that demonstrates the problem. The repeated mentions of *how many* tabs are open distract from the crucial detail of *how* the tabs were opened. It would be good to tidy it up for future readers, but I think I understand now, and will have a go at answering shortly. – IMSoP Jul 09 '14 at 20:04
  • Makes perfect sense - updated with the simplified post!. – user3231682 Jul 09 '14 at 20:08

2 Answers2

0

I think you would just link the home page the way you would have linked page a and b to the home page. Example below

Home Page:

<li><a href="Page-A.html" onclick="new_page('Page-A.html')" >Page-A</a></li>
<li><a href="Page-B.html" onclick="new_page('Page-B.html')">Page-B</a></li>

Page-A:

<li><a href="Home.html" onclick="new_page('Home.html')">Home</a></li>
<li><a href="Page-B.html" onclick="new_page('Page-B.html')">Page-B</a></li>

Page-B

<li><a href="Home.html" onclick="new_page('Home.html')">Home</a></li>
<li><a href="Page-A.html" onclick="new_page('Page-A.html')">Page-A</a></li>

In Javascript 

function new_page(url) {
      var win = window.open(url, '_blank');
      win.focus();
    }

This Function then opens the Home page in its individual tab, which is what you want :)

Hope this helps :)

Kebab Programmer
  • 1,213
  • 2
  • 21
  • 36
0

When the user clicks a link with a target attribute set, one of two things happens:

  • an existing "browsing context" (window/tab/frame) with that name is used to display the linked resource
  • a new "browsing context" (usually a new tab) is created, and its name is set to the specified value

When a page is loaded from a link without a target, or by directly typing the URL, it is not assigned a name. It will either have no name, or retain the name set by some previous action.

So in order to link back to a tab which you didn't create, you need to give it a name, using JS, by setting the window.name property.

The easiest way to do this would be to unconditionally name your windows as soon as any page loads; if the name is already set, setting it again won't matter, but if not, this will ensure it has a value you can know and rely on. At its simplest:

  • in Home.html, use <body onload="window.name='home';">
  • in PageA.html, use <body onload="window.name='pageA';">
  • wherever you want, use <a href="/Home.html" target="home"> and <a href="/PageA.html" target="pageA">

You might want to be a bit cleverer, and only assign a name if one wasn't set by the link the user followed. For instance:

  • on all pages, include <body onload="if ( window.name.substr(0,7) != 'mySite_' ) { window.name='mySite_firstTab'; }">
  • links to the home page could use <a href="/Home.html" target="mySite_firstTab">, meaning they will always occupy the oldest tab, regardless of what page was first opened
  • links to other pages could target a particular tab, such as <a href="/Help/FAQ.html" target="mySite_helpTab">
IMSoP
  • 89,526
  • 13
  • 117
  • 169