正确执行弹出窗口
基本上我有一个提供帮助系统的网站。激活后,此帮助系统会触发一个弹出窗口,其中会显示帮助内容。
当用户在网站上导航时,通过使用 cookie(我在第一次打开窗口时设置并在用户关闭窗口时清除)检测窗口是否仍然打开并加载新的帮助内容。页。
事实证明,将新内容加载到此弹出窗口中的唯一方法是弹出一个具有相同名称的新页面(这样我们就不会在各处打开多个弹出窗口)并包含所需的内容。
当用户第一次触发弹出窗口时,这工作正常,但之后当我尝试自动尝试弹出窗口时,大多数浏览器都会出现问题。
只是想知道是否有人对我如何使其正常工作有任何想法?
更新 @Rob
这是我有的:
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
<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
<html>
<head>
<script type="text/javascript" src="Helper.js"></script>
</head>
<body>
<h1>Help 1</h1>
</body>
</html>
Help2.html
<html>
<head>
<script type="text/javascript" src="Helper.js"></script>
</head>
<body>
<h1>Help 2</h1>
</body>
</html>
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
(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。
目前它没有这样做。任何想法。
Basically I have a website that offers a help system. When activated this help system triggers a popup in which the help content appears.
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?'
UPDATE
@Rob
Here is that I have:
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
<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
<html>
<head>
<script type="text/javascript" src="Helper.js"></script>
</head>
<body>
<h1>Help 1</h1>
</body>
</html>
Help2.html
<html>
<head>
<script type="text/javascript" src="Helper.js"></script>
</head>
<body>
<h1>Help 2</h1>
</body>
</html>
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
(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);
})();
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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果您的整个网站托管在同一域中,则可以使用
window.opener
属性,并结合页面上的一些调整。windowLocation
,以及函数setHelperWindow
和popup
中>windowLocation
window.opener
对象的setHelperWindow
。如果window.opener
窗口已关闭,轮询器将终止。由于
windowLocation
变量一直在更新(无论是在使用window.open()
之后还是通过弹出窗口中的 poller 函数),因此有可能被弹出窗口拦截器已大大减少。注意:两个脚本都必须包含在每个主页面和帮助程序页面中:
Helper.js
MainPopup.js
示例:用法(主要)
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
, and functionssetHelperWindow
andpopup
windowLocation
setHelperWindow
of thewindow.opener
object. If thewindow.opener
window has closed, the poller will terminate.Because the
windowLocation
variable is getting updated all the time (either after usingwindow.open()
or by the poller function in the popup), the possibility of getting blocked by a popup blocker is reduced severely.Note: Both scripts has to be included at each main and helper page:
<script src="filename.js"></script>
Helper.js
MainPopup.js
Example: Usage (main)
像您所做的那样为窗口指定一个名称应该可以工作,例如
然后,例如当 page2 加载时,
请记住,弹出窗口阻止程序将阻止此行为工作,除非您添加例外。例如在 chrome 中,选项>>在引擎盖下>>内容设置>>弹出窗口>>管理异常。
免责声明:我不喜欢使用弹出窗口,并且会使用 lightsout box 来代替您的在线帮助,通过 ajax 请求加载内容。
Specifying a name for the window like you have done should work, e.g.
Then, e.g. when page2 loads,
Bear in mind though that the popup blocker is going to stop this behaviour from working unless you add an exception. E.g. in chrome, options >> under the bonnet >> content settings >> pop-ups >> manage exceptions.
Disclaimer: I'm not a fan of using popups and would use a lightsout box instead for your online help, loading the content via an ajax request.