0

I have a site with a side menu that allows a user to click on a link in this menu, which then opens within an iframe. When the user clicks on another menu option, it then launches that menu's selection iframe source into a separate tab and so on. So basically now, I have the original tab for menu option "A" - iframe src = "https://example.com?mo=a" and the second tab with menu option "B" - iframe src = "https://example.com?mo=b"

What I am unsure of is a way of determining what tabs are currently open for this site as a user can launch other menu options into new tabs from any existing opened site tabs.

I needs a means of checking what tabs are open and the iframe source within each of these tabs as I want to prevent the user from opening the same menu option more than once. An example of this say, is from Menu option "B" tab, the user can click on Menu option "A" which is already open and so would like to go straight to that tab.

I also need a means of checking when a tab is closed which should then come of my opened tab checklist.

I looked into localStorage and sessionStorage of passing info between tabs but only localStorage can do this but unsure how to track.

What I have tried so far is something like the following:

let srcName = menu-option-clicked-val;    // menuA
let src = $('#my-iframe-id').attr('src'); // https://example.com?mo=a
localStorage.setItem(srcName, src);

So basically, as a menu option is clicked, I check to see if this is already stored within localStorage using localStorage.getItem(srcName)

On top of this, I need to also know when a user closes a tab so that I can then also remove this tab entry from localStorage.

I was also thinking of somehow having an array of opened tabs, to track this info. Is this possible?

halfer
  • 19,824
  • 17
  • 99
  • 186
tonyf
  • 34,479
  • 49
  • 157
  • 246
  • Please show us what you have already tried using localstorage. – Rakesh G R Jul 26 '18 at 11:14
  • @RakeshGR - pls see my updated question. – tonyf Jul 26 '18 at 11:58
  • I think the Broadcast Channel API is better suited to your requirement. https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API – Rakesh G R Jul 26 '18 at 12:09
  • Also suggest reffering: https://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows – Rakesh G R Jul 26 '18 at 12:09
  • If you want to use localstorage I'm sure you can work on top of this: https://stackoverflow.com/questions/23690666/check-if-my-website-is-open-in-another-tab – Rakesh G R Jul 26 '18 at 12:26
  • @RakeshGR - appreciate the links. I'm particularly interested in the Broadcast Channel API but since I have not used this method before, I'm unsure how I can use this for my requirement, i.e. check if tab iframe already open and how to check when a tab iframe is closed. Any further guidance would be great. – tonyf Jul 26 '18 at 13:39

0 Answers0