0

I am developing a Web Application.

In that, I need to open multiple page in different browser tab from the main page and if the main page closed then all other opened browser tab need to closed or click on the Close Tab button.

I done this by using Array, but that Array reset automatically when the main page getting refreshed.

Sample Code:-

Jsp

<a4j:commandButton value="Test1" onclick="return newTab('test1.jsp');"/>
<a4j:commandButton value="Test2" onclick="return newTab('test2.jsp');"/>
<a4j:commandButton value="Test3" onclick="return newTab('test3.jsp');"/> 

<a4j:commandButton value="Close Tab" onclick="closeTabs();"/>

JavaScript

  var windowObject = new Array();
  function newTab(mypage)
     {
        var newwin=window.open(mypage);
        windowObject.push(newwin);
        return false;
     }

  function closeTabs()
     {
        for (i = 0; i < windowObject.length; i++) 
            {
              windowObject[i].close();
            }
     }

Help me to solve this issue.

Venkat Raj
  • 219
  • 3
  • 18
  • I don't think it's possible to store an object to localStorage. You could store a reference (name/id). But again I doubt you'd find a way to create a browser tab object of of that afterwards and be able to close it, as this would be a major security issue. – Jeff Apr 11 '18 at 09:02
  • @Jeff, I already tried with localStorage but couldn't get browser tab object. – Venkat Raj Apr 11 '18 at 09:31

2 Answers2

1

If you close/refresh the main tab then you will lose the array data and you will not be able to close the tabs you have opened.

the possible solution to overcome this problem is, maintaining the tab information in local-storage so everytime you call close() then get the tab names from local-storage iterate over it and close the opened tabs.

local-storage only support storing string type variables you can see in below question on how to store and retrieve the array in localstorage. How do I store an array in localStorage?

smali
  • 4,687
  • 7
  • 38
  • 60
  • As you said, that localstorage only store string type only. so it could not helped. is there any other way??? – Venkat Raj Apr 11 '18 at 09:52
  • you can just stringify() the JSON and store it in local storage, go through the links added in my answer. there is no other way to pass data between tabs. – smali Apr 11 '18 at 09:54
  • I tried but i got exception like "SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data" in firebug. See code - > https://www.w3schools.com/code/tryit.asp?filename=FQ9WE16E6M0I – Venkat Raj Apr 11 '18 at 10:32
1

TLDR; In theory, it can't be done. In reality, you can always find a way around it.

Why can't we store a reference to a window

When refreshing a page, you lose the ability to keep an actual reference to a window (i.e. an Object with the methods associated), because the only place for you to store it would be in cookies, or localStorage. But these only allow you to store string representations of your data. Thus, once the page is reloaded, you cannot use these window elements anymore. (Even if you could store actual Objects, they would be useless copies - not full-fledged circular Objects such as window)

A way around it

I found your question interesting, so I gave it a try with this Proof of Concept:

Two types of pages

A Master page will be able to open Slave pages. It will also be able to close them as long as you don't refresh it. But if you do, you'll need to find a way to leave them messages for letting them know they should be closed.

Leave a note on the fridge

Here, our fridge will be the localStorage. When a slave page is open, it adds a post-it note to the fridge, giving its Id, and its status. This post-it can be accessed and modified by the master page. Periodically, each slave will check its associated post-it, and see if it should close itself or not.

An algorithm you could create

This pseudo code shows how you could do it, in a simple manner.

Master page script

// If the page was simply refreshed, we want to cancel our
// post-it modifications before they take effect
when (window_is_loaded) :
    cancel_previous_postit_modifications()

when (open_slaves_button_is_clicked) :
    open_slaves()

// Here, we know we can close the slaves
when (close_slaves_button_is_clicked) :
    tell_slaves_to_close()

// Here, we don't know whether this is a refresh or not,
// So we tell them to wait, and close if they don't here back from us
when (window_is_being_unloaded) :
    tell_slaves_to_close_after_delay()

Slave page script

when (window_is_loaded) :
    create_postit_note()

when (window_is_being_unloaded) :
    remove_postit()

every (X milliseconds) :
    if (status_on_postit_is('willBeClosed')) :
        change_status_to('shouldBeClosed')
    else if (status_on_postit_is('shouldBeClosed')) :
        close_window()

Test code

To check if this is possible, I created a test project:

Full code: https://github.com/blex41/slave-windows

Live demo: Here

blex
  • 24,941
  • 5
  • 39
  • 72