How (Javascript) return focus to the OPENER window (without changing its URL) - from its (child) popup?

Question

I have a page (I'll call this the 'Opener' window) containing a link to open a 'popup' window ( in same domain ) -

var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
winPopupObjRef = window.open("popupPage.htm","popupWindowName",'width=300,height=200,resizable,scrollbars,status,' width='+w+', height='+h+', top='+top+', left='+left);");

We need to allow the visitor to return to the 'Opener' window. They can of course do this easily manually as the popup is small and in the centre, with the (Larger)'Opener' window surrounding it. ie If the visitor clicks in the 'Opener' area - the 'Popup' disappears, and they can continue browsing the site.

How can I programatically do what the visitor is able to do manually? { PS without Closing the popup window }

I've searched and tried (unsuccessfully;(

window.opener()
window.blur()

I know the 'name' of the window - is there a way to window.open via 'name' without stating a url?

{I;ve assumed I cannot state the URL - because a visitor may:

click to open the popup,
return to the Opener to continue browsing
View the popup again
circle round 2 & 3 above

thinks: unless there is a way to capture the current url each time they circle round?

The code I'm using to open the popup is show below (see: https://developer.mozilla.org/en-US/docs/Web/API/Window/open ), I thought I would be able to also modify it in the popup window - to link back to the 'Opener'. Any help much appreciate.

<script type="text/javascript">
var windowObjectReference = null; // global variablemanually 

function openFFPromotionPopup() {
  if(windowObjectReference == null || windowObjectReference.closed)
  /* if the pointer to the window object in memory does not exist
     or if such pointer exists but the window was closed */

  {
    windowObjectReference = window.open("http://www.spreadfirefox.com/",
   "PromoteFirefoxWindowName", "resizable,scrollbars,status");
    /* then create it. The new window will be created and
       will be brought on top of any other window. */
  }
  else
  {
    windowObjectReference.focus();
    /* else the window reference must exist and the window
       is not closed; therefore, we can bring it back on top of any other
       window with the focus() method. There would be no need to re-create
       the window or to reload the referenced resource. */
  };
}
</script>

(...)

<p><a
 href="http://www.spreadfirefox.com/"
 target="PromoteFirefoxWindowName"
 onclick="openFFPromotionPopup(); return false;" 
 title="This link will create a new window or will re-use an already opened one"
>Promote Firefox adoption</a></p>

The long-term objective is to help on mobile devices - where the 'Opener' may not be visible behind the popup window

===========================draw a line on the above=====================

I think I have mislead you by using (above) the code from 'Mozilla best practises'. Below is the code I am trying to get working.

Here is the code for the 'Opener' window: "/Calling_mainPage.htm"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Opening/Main page</title>

<script type="text/javascript">

//var windowParentObjectReference = window.open("Calling_mainPage.htm","OpenerWinName"); // Name the opening page, in case I find we can return to it by name
//console.log({windowParentObjectReference});

// Modified extract from Mozilla Best Practises
var windowPopupObjectReference = null; // global variable

function openPopupWin() {

//alert ({ windowPopupObjectReference});
//console.log(" hello world ");

  if(windowPopupObjectReference== null || windowPopupObjectReference.closed)
  /* if the pointer to the window object in memory does not exist
     or if such pointer exists but the window was closed */

  {
    windowPopupObjectReference = window.open('popupPage.htm','popupWindowName','width=300,height=200,left=200,top=200');
    /* then create it. The new window will be created and
       will be brought on top of any other window. */
  }
  else
  {
//  alert (windowPopupObjectReference);
    windowPopupObjectReference.focus();
    /* else the window reference must exist and the window
       is not closed; therefore, we can bring it back on top of any other
       window with the focus() method. There would be no need to re-create
       the window or to reload the referenced resource. */
  };
}
</script>
</head>

<body>

Opening/Main page

<p><a
 href="#"
 target="PopupWindowName"
 onclick="openPopupWin(); return false;"
 title="This link will (hopefully) create a new window or will re-use an already opened one">Open/Create the popup Window</a></p>
</body>
</html>

And here the code for the Popup window: "/popupPage.htm"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>popup page</title>

<script type="text/javascript">
// Modelled on Mozilla Best Practises

// var windowParentObjectReference = true; // set global variable
// console.log({windowParentObjectReference});

function openParentWin() {
  if(windowParentObjectReference == null || windowParentObjectReference.closed)
  /* if the pointer to the window object in memory does not exist
     or if such pointer exists but the window was closed */

  {
//    alert("Hello! new win needed!");
    windowParentObjectReference = window.open("Calling_mainPage.htm","ParentWindowName","resizable,scrollbars,status");
    /* then create it. The new window will be created and
       will be brought on top of any other window. */
  }
  else
  {
 //   alert("focus on existing win!");
    windowParentObjectReference.focus();
    /* else the window reference must exist and the window
       is not closed; therefore, we can bring it back on top of any other
       window with the focus() method. There would be no need to re-create
       the window or to reload the referenced resource. */
  };
}
</script>
</head>
<body style="background:grey;">
popup page
<p><a
 href="#"
 target="ParentWindowName"
 onclick="openParentWin();//return false;"
 title="This link will create a new window or will re-use an already opened one">Return (hopefully) to the Parent/Opener WIndow</a></p>
</body>
</html>

The Opener Window calls the Popup window OK, But the Popup does not return to the Opener.

Answer 1

As soon as the new window contains a page from another origin, all bets are off. You CAN try to embed an iFrame in the new window using a page from the same origin, then you can continue to manipulate opener.

You cannot interrogate the URL or an iframe that contains the URL of a foreign page

Here is an improvement. It does not work at all in a sandboxed environment like SO

 let windowObjectReference = null; // global variablemanually const pop = function(e) { if (windowObjectReference == null || windowObjectReference.closed) { windowObjectReference = window.open("http://www.spreadfirefox.com/", "PromoteFirefoxWindowName", "resizable,scrollbars,status"); if (windowObjectReference) e.preventDefault(); // allow the target to work in case of popup blockers } else { windowObjectReference.focus(); } } "click touchstart".split(" ").forEach(function(e){ document.querySelector("[target=PromoteFirefoxWindowName]").addEventListener(e,pop); });

 <p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindowName" title="This link will create a new window or will re-use an already opened one" >Promote Firefox adoption</a></p>

Ok here is how to allow the parent window to manipulate the popup

Create this page

It has to have the same protocol as the embedded iframe content, so I suggest if you own spreadfirefox.com you make it https

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
    }
    .container iframe {
      position: absolute;
      top: 0;
      left: 0px;
      width: 100%;
      height: 100vh;
      padding: 0px;
      margin: 0px;
    }
  </style>
</head>
<body>
  <div class="container">
    <iframe scrolling="no" src="https://www.spreadfirefox.com/" frameBorder="0"></iframe>
  </div>
</body>
</html>

NOW you can have blur scripts in the page with the iframe and refocus the popup using the window handle, because the popup now is from the same server as your script and parent

How (Javascript) return focus to the OPENER window (without changing its URL) - from its (child) popup?

Question

1 answers

solution1
0 2020-11-07 19:16:45

How (Javascript) return focus to the OPENER window (without changing its URL) - from its (child) popup?

Question

1 answers

solution1 0 2020-11-07 19:16:45

solution1
0 2020-11-07 19:16:45