如果您相信雅各布·尼尔森(Jakob Neilsen)和他的支持者一样, 没有什么比弹出窗口更邪恶的了 。 在许多方面,这是正确的。 为什么? 好吧,我们会尽快列出原因,但简而言之是因为它们几乎总是实施不佳或根本不需要。 本教程将说明,如果正确思考,就可以使用弹出窗口,而不会让任何人(尤其是浏览您网站的人)感到不安。
弹出式窗口问题
弹出窗口的常见故障是:
- 如果禁用脚本,或者浏览器不支持JavaScript,则弹出窗口将不起作用
- 搜索引擎无法跟踪到弹出窗口的链接(脚本元素始终被忽略)
- 弹出式窗口存在可访问性问题
- 如果将目标页面移至站点的另一部分,则站点管理工具(例如DreamWeaver)将无法更新弹出窗口的链接
- 许多人运行着弹出式杀手,它们会在打开窗户时立即关闭窗户
- 在Mozilla中,有一个选项可以阻止弹出窗口首先打开
ew 那是一个列表……您可能可以在列表中添加自己的列表。 那么,我们如何解决这些问题?
脚本禁用
在禁用脚本的情况下,弹出窗口不执行任何操作。 就那么简单。 但是,如果您使用标准的<a href>
,则不会出现此类问题。 因此,不要使用:
<a href="#" onclick="window.open('file.htm');">
您可以使用:
<a href="file.htm" onclick="window.open('file.htm');return false;">
这样,如果禁用脚本,则标准链接仍然有效。
但是,也许有很好的理由使您希望在当前窗口的顶部打开窗口。 如果是这样,只需添加一个目标属性,如下所示:
<a href="file.htm" onclick="window.open('file.htm');
return false;" target="newWin">
答对了。 问题解决了。 但是我们可以做更多的事情!
搜索引擎
通过上面的修改代码,搜索引擎可以遵循标准的href,因此这是我们问题列表中列出的另一个问题。
辅助功能问题
弹出窗口的最大缺点是它们将焦点从主浏览器窗口移开,这可能会令人感到不安。 除了可访问性之外,它们还提出了一般的可用性问题。 您有多少次看到某人启动弹出窗口,然后无意中单击了启动器窗口,又以为没有任何反应,再次单击该链接却没有结果? 当然,该窗口已打开,但现在位于启动器窗口下方,只有向下移动到任务栏并从中选择窗口才能解决此问题。
技巧是通知用户该链接将在新窗口中打开。 有多种解决方法:
- 将说明作为链接本身的一部分
- 在标题属性中添加一些说明
- 使用适当的图标表示即将到来的弹出窗口
这样,如果失去焦点,则用户可以建立连接,例如:
要解决在主窗口上失去焦点的问题,您可以使用JavaScript重新设置焦点。 为此,建议的脚本将出现在本文的结尾。
站点链接管理工具
如果您习惯使用DreamWeaver之类的工具或内容管理系统来移动页面,则希望保持链接。 使用标准href时,它们通常是(取决于您使用的工具),但是使用JavaScript则不太可能。 回到我们的代码片刻:
<a href="file.htm" onclick="window.open('file.htm');
return false;">
上面的链接可以很好地保持……几乎。 其中一半-href部分。 但是onclick部分可能会被忽略。 这是个大问题。 您可能会认为您的链接已更新,但是实际上启用了JavaScript的人会被发送到丢失的页面。 因此,您可能会发现您的代码将更改为:
<a href="newlocation/newfile.htm" onclick="window.open('file.htm');
return false;">
而且,如果您要在启动页面上运行链接验证器,则您的链接确实有效。 那么,我们如何解决这个问题? 像这样:
<a href="file.htm" onclick="window.open(this.href);
return false;" target="newWin">
只有一个链接可以维护,并且正确的href将用于window.open方法。 太好了–现在我们要到达某个地方!
弹出窗口杀手/ Mozilla禁用弹出窗口
与禁用JavaScript一样,仅提供标准href意味着该链接仍然可以使用。 现在我们只需要解决哪个窗口具有焦点问题...
完美的弹出脚本
我们建议您使用一个函数,该函数可以放在一些共同共享的JavaScript代码中(就像我们在此站点上所做的那样),并且可以从该站点的任何位置轻松调用该函数。 这比每次都费力地写出window.open函数要好得多。 除了URL外,您可能还希望包括诸如高度和宽度之类的参数,以及选择哪种类型的弹出式样式(取决于您定义的样式)。
这是我推荐的代码:
var newWin = null;
function popUp(strURL, strType, strHeight, strWidth) {
if (newWin != null && !newWin.closed)
newWin.close();
var strOptions="";
if (strType=="console")
strOptions="resizable,height="+
strHeight+",width="+strWidth;
if (strType=="fixed")
strOptions="status,height="+
strHeight+",width="+strWidth;
if (strType=="elastic")
strOptions="toolbar,menubar,scrollbars,"+
"resizable,location,height="+
strHeight+",width="+strWidth;
newWin = window.open(strURL, 'newWin', strOptions);
newWin.focus();
}
函数中的其他代码处理焦点方面。 如果单击调用此功能的链接,然后在页面上单击以隐藏弹出窗口,然后单击另一个弹出链接,则代码将评估弹出状态,然后关闭弹出窗口窗口,然后用新尺寸重新打开它。
要调用该函数,您将使用以下代码:
<a href="my-pop-up-window.htm"
onclick="popUp(this.href,'console',400,200);return false;"
target="_blank">This is my link</a>
或者,使用一些实际示例:
这个
是我的弹出链接(控制台模式)
这个
是我的弹出式窗口(固定模式)
这个
是我的(弹性模式)
注意:“返回假”部分有效地取消了href的默认操作,因此它不会打开弹出窗口和普通的HTML窗口,而是会打开一个窗口或另一个窗口。 尝试使用上面的链接(启用和不启用JavaScript)亲自查看。
你还能要求什么呢? 好吧……这块蛋糕还有最后一块糖衣。
关闭弹出窗口
打开弹出窗口后,我们可能会依靠人们使用浏览器/操作系统控件来关闭新打开的窗口。
但是人们并不总是这样做! 因此,我们应该在弹出窗口本身中提供一个链接(或按钮,如果您愿意),以允许用户将其关闭。 但是,我们假设用户已禁用脚本,并且已通过标准href路径打开了弹出窗口。 您若有所思地提供的“关闭此窗口”链接将提示如下所示的不太友好的对话:
要解决此问题,您应该使用JavaScript编写指向网页的关闭链接,并检查该窗口是否作为window.open()
方法的一部分打开。 这样,如果它是一个真正的弹出窗口,则链接将出现,并且close()
方法将起作用; 如果不是真正的弹出窗口,则该链接将不会出现。
这是执行此操作的代码:
<script language="JavaScript">
<!--
if (window.opener)
document.write('<strong><a href="#" onclick="self.close();">' +
'Close this window</a></strong>');
//-->
</script>
再次尝试链接,亲眼看看:
结论
希望本教程证明了弹出链接可以访问,对搜索引擎友好并且是非侵入性的。 但是,即使遵循所有这些建议,您仍然应该问自己是否真的需要打开新窗口。
最后要注意的一点是,弹出窗口应该是人们选择使用的东西,因此不要使用window.onload或window.onunload事件将弹出窗口强加给用户。 这总是使人们烦恼……除非他们想购买X10相机或访问“世界上最大的在线赌场”,但不知道,那就是!