[英]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;(我已经搜索并尝试过(未成功;(
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 - 因为访问者可能会:
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好的,这里是如何允许父窗口操作弹出窗口
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.