简体   繁体   English

(Javascript) 如何将焦点返回到 OPENER 窗口(不更改其 URL) - 从其(子)弹出窗口?

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

I have a page (I'll call this the 'Opener' window) containing a link to open a 'popup' window ( in same domain ) -我有一个页面(我将其称为“Opener”窗口),其中包含打开“弹出”窗口(在同一域中)的链接-

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.我们需要允许访问者返回到“Opener”窗口。 They can of course do this easily manually as the popup is small and in the centre, with the (Larger)'Opener' window surrounding it.他们当然可以轻松地手动执行此操作,因为弹出窗口很小且位于中心,周围有(较大的)'Opener' 窗口。 ie If the visitor clicks in the 'Opener' area - the 'Popup' disappears, and they can continue browsing the site.即如果访问者点击“Opener”区域——“Popup”消失,他们可以继续浏览网站。

How can I programatically do what the visitor is able to do manually?如何以编程方式执行访问者可以手动执行的操作? { PS without Closing the popup window } { PS 不关闭弹窗}

I've searched and tried (unsuccessfully;(我已经搜索并尝试过(未成功;(

  • window.opener() window.opener()
  • window.blur() window.blur()

I know the 'name' of the window - is there a way to window.open via 'name' without stating a url?我知道窗口的“名称” - 有没有办法通过“名称”打开 window.open 而不说明网址?

{I;ve assumed I cannot state the URL - because a visitor may: {我假设我无法说明 URL - 因为访问者可能会:

  1. click to open the popup,点击打开弹窗,
  2. return to the Opener to continue browsing返回 Opener 继续浏览
  3. View the popup again再次查看弹窗
  4. circle round 2 & 3 above圈上第 2 和第 3 轮

thinks: unless there is a way to capture the current url each time they circle round?认为:除非有一种方法可以在每次循环时捕获当前 url?

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'.我用来打开弹出窗口的代码如下所示(参见: https : //developer.mozilla.org/en-US/docs/Web/API/Window/open ),我想我也可以修改它在弹出窗口中 - 链接回“开瓶器”。 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长期目标是在移动设备上提供帮助 - 在弹出窗口后面可能看不到“Opener”

===========================draw a line on the above===================== ============================在上面画一条线================== ====

I think I have mislead you by using (above) the code from 'Mozilla best practises'.我想我使用(以上)来自“Mozilla 最佳实践”的代码误导了您。 Below is the code I am trying to get working.下面是我试图开始工作的代码。

Here is the code for the 'Opener' window: "/Calling_mainPage.htm"这是“Opener”窗口的代码:“/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"这里是弹出窗口的代码:“/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. Opener Window 调用Popup 窗口OK,但Popup 不返回Opener。

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.您可以尝试使用来自同一来源的页面在新窗口中嵌入 iFrame,然后您可以继续操作 opener。

You cannot interrogate the URL or an iframe that contains the URL of a foreign page您无法查询包含外部页面 URL 的 URL 或 iframe

Here is an improvement.这是一个改进。 It does not work at all in a sandboxed environment like SO它在像 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好的,这里是如何允许父窗口操作弹出窗口

  1. 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它必须与嵌入的 iframe 内容具有相同的协议,因此我建议如果您拥有 spreadfirefox.com,则将其设为 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>
  1. 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现在您可以使用 iframe 在页面中使用模糊脚本并使用窗口句柄重新聚焦弹出窗口,因为现在弹出窗口与您的脚本和父级来自同一服务器

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在加载子弹出窗口后立即将其重定向到其他URL? - How to Redirect a Child Popup Window to a Different URL as soon as its loaded? javascript从弹出窗口打开器打开颜色框? - javascript open colorbox from popup window opener? 如何从开启者断开JavaScript弹出窗口 - How to disconnect JavaScript popup from opener Javascript将值从弹出窗口传递到其父窗口 - Javascript Passing value from a popup window to its parent window 无法将值从window.opener传递给其父级 - Can't pass value from window.opener to its parent 如何在 Chrome 中聚焦开启器窗口? - How to focus opener window in Chrome? 如何在不更改其内容位置的情况下弹出整个Div - How To Popup whole Div without changing its content position IE9,如何从打开器打开的弹出窗口引用窗口,打开器刷新后 - IE9, how to reference window from the popup window opened from the opener, after the opener refreshed himself window.opener为null,父窗口无法访问其自身的弹出窗口或JavaScript运行时错误0x800706b5(facebook,twitter登录或Paypal付款) - window.opener is null, parent window cannot access its own popup, or JavaScript runtime error 0x800706b5 (facebook, twitter login or paypal payments) Javascript,从opener调用子窗口函数不起作用 - Javascript,calling child window function from opener doesn't work
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM