正确执行弹出窗口 [英] Doing popups correctly
问题描述
基本上，我有一个提供帮助系统的网站.激活后，此帮助系统会触发一个弹出窗口，其中会显示帮助内容.
Basically I have a website that offers a help system. When activated this help system triggers a popup in which the help content appears.
当用户随后在站点中导航时，通过使用cookie，我可以检测到该窗口是否仍处于打开状态并加载新的帮助内容(该设置是在我第一次打开窗口时设置的，在用户关闭窗口时清除的)进入新页面.
As the users then navigates around the site, through the use of a cookie I detect (that I set when the window is first opened and clear when the user closes the window) whether the window is still opened and load new help content for the new page.
事实证明，将新内容加载到此弹出窗口的唯一方法是弹出一个具有所需内容的同名新页面(这样我们就不会在各处打开多个弹出窗口).
As it turns out the only way to load new content into this popup window is to pop open a new page with the same name (so that we don't multiple popups opening everywhere) with the desired content.
这在用户第一次触发弹出窗口时效果很好，但是在此之后，当我尝试自动尝试弹出窗口时，大多数浏览器都会出现问题.
This works fine the first time the user triggers the popup, but after that when I try and automatically try and pop open a window, I have problems with most browsers.
只是想知道是否有人对我如何使其正常工作有任何想法?'
Just wondering if anyone has any ideas on how I can get this to work correctly?'
更新 @Rob
这里是我有
Page1.html
Page1.html
<html>
<head>
<script type="text/javascript" src="MainPopup.js"></script>
</head>
<body>
<h1>Page 1</h1>
<a href="Page2.html">Next</a>
<a href="javascript:setPopupActiveCookie();popup('Help1.html')">Click</a>
<script type="text/javascript">popupWindowIfCookieSet('Help1.html');</script>
</body>
Page2.html
Page2.html
<html>
<head>
<script type="text/javascript" src="MainPopup.js"></script>
</head>
<body>
<h1>Page 2</h1>
<a href="Page1.html">Prev</a>
<a href="javascript:setPopupActiveCookie();popup('Help2.html')">Click</a>
<script type="text/javascript">popupWindowIfCookieSet('Help2.html');</script>
</body>
</html>
</html>
Help1.html
Help1.html
<html>
<head>
<script type="text/javascript" src="Helper.js"></script>
</head>
<body>
<h1>Help 1</h1>
</body>
</html>
Help2.html
Help2.html
<html>
<head>
<script type="text/javascript" src="Helper.js"></script>
</head>
<body>
<h1>Help 2</h1>
</body>
</html>
MainPopup.js
MainPopup.js
var windowLocation;
function setHelperWindow(new_windowLocation){
windowLocation = new_windowLocation;
}
function popup(url){
try{
windowLocation.href = url;
} catch(e){
windowLocation = window.open(url, "HelperWindow").location;
}
}
function popupWindowIfCookieSet() {
//Stuffhere
}
function setPopupActiveCookie() {
//Stuffhere
}
Helper.js
Helper.js
(function(){
var failures = 10*60; //Cancel poller after 1 minute without `opener`
var poller = setInterval(function(){
try{
// Attempt to send the current location object to window.opener
window.opener.setHelperWindow(location);
}catch(e){
if(!window.opener && failures-- < 0) clearInterval(poller);
}
}, 100);
})();
不幸的是，这不起作用.应该发生的是，如果我从Page1弹出打开Helper页面，然后转到Page2.html，则显示Help1.html内容的弹出窗口将切换为Help2.html.
Unfortunately this doesn't work. What should happen is that if i pop open the Helper page from Page1, when I then go to Page2.html, the popup window showing the Help1.html content would switch to Help2.html.
当前它没有这样做.任何想法.
Currently its not doing this. Any ideas.
推荐答案
如果整个网站托管在同一域中，则可以使用window.opener属性，并在页面上进行一些调整.
If your whole website is hosted at the same domain, you can use the window.opener property, in conjunction with some adjustments at your page.
- 主要:声明变量
windowLocation和函数setHelperWindow和popup - 主弹出窗口:打开一个新窗口，并将引用存储在变量
windowLocation中
- 帮助程序窗口:创建一个轮询器，该轮询器尝试调用
window.opener对象的setHelperWindow.如果window.opener窗口已关闭，则轮询器将终止.
- Main: Declare a variable
windowLocation, and functionssetHelperWindowandpopup - Main-popup: Open a new window, and store a reference in variable
windowLocation - Helper-window: Create a poller, which attempts to invoke the
setHelperWindowof thewindow.openerobject. If thewindow.openerwindow has closed, the poller will terminate.
由于windowLocation变量一直都在更新(使用window.open()之后或通过弹出窗口中的poller函数)，因此大大降低了被弹出窗口阻止程序阻止的可能性.
Because the windowLocation variable is getting updated all the time (either after using window.open() or by the poller function in the popup), the possibility of getting blocked by a popup blocker is reduced severely.
注意:每个主页面和帮助页面上都必须包含两个脚本:
<script src="filename.js"></script>
Note: Both scripts has to be included at each main and helper page:
<script src="filename.js"></script>
(function(){
var failures = 10*60; //Cancel poller after 1 minute without `opener`
var poller = setInterval(function(){
try{
// Attempt to send the current location object to window.opener
window.opener.setHelperWindow(location);
}catch(e){
if(!window.opener && failures-- < 0) clearInterval(poller);
}
}, 100);
})();
MainPopup.js
var windowLocation;
function setHelperWindow(new_windowLocation){
windowLocation = new_windowLocation;
}
function popup(url){
try{
windowLocation.href = url;
} catch(e){
windowLocation = window.open(url, "HelperWindow").location;
}
}
示例:用法(主要)
<a href="javascript:popup('/help-pages/howto-doing-popups-correctly')">Click</a>
这篇关于正确执行弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
