Parent screen (test1.html) ⇒ Child screen (test2.html) ⇒ Grandchild screen (test3.html)

When the parent screen or child screen is closed, the grandchild screen is also closed.
How can I implement it in Javascript?

・ Parent screen javascript

var subWindow
$("[id ^ = id1]"). click (function () {
    subWindow = window.open ("test2.html", "test2");// Open a child screen
    subWindow.focus ();
// Parent screen CLOSE process
    window.addEventListener ('unload', function (event) {
        if (typeof subWindow! = "Undefined") {
            subWindow.close ();// When the parent screen is closed, the child screen is also closed

・ Child screen javascript

var subWindow2
$("[id ^ = id2]"). click (function () {
    subWindow2 = window.open ("test3.html", "test3");// Open grandchild screen
    subWindow2.focus ();

I would like to ask a professor.

  • Answer # 1

    To briefly explain

    Save the value of window.open as a variable
    Close child when parent exits
    (Since the parent is window.open, there should be a child value)

    Then the child will end
    Close grandchild screen from grandchild value when exiting
    (Since the child is window.open, there should be a grandchild value)

    You can close it in the flow.
    As far as you can see the source, on the child screen

    window.addEventListener ('unload', function (event) {
      if (typeof subWindow2! = "Undefined") {
        subWindow2.close ();

    It looks good just

  • Answer # 2

    Is it just to write the same process as test1.html in test2.html?

  • Answer # 3

    Since I used the [iframe] tag on the grandchild screen, when I tried to open it from the child screen,
    "Window.addEventListener ('unload', function (event) {" passes
    As a result, the closing event has unintended consequences.
    So, with javascript on the grandchild screen side (test3.html)

    // When loading a page
    function pageLoad () {
        setInterval ("surveillance ()", 1000);// Monitor every second
    // Monitoring script
    function surveillance () {
        if (! window.opener || window.opener.closed) {// Check for the existence of the main window
            open ('about: blank','_ self'). close ();// Redisplay once and then Close
            return false;// Suspend the subsequent processing

    By monitoring whether the child screen is open from the grandchild screen side every second,
    I was able to implement it.

    Thank you very much.

Related articles