java窗口按钮弹出窗口_完美的弹出窗口

java窗口按钮弹出窗口

如果您相信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，因此这是我们问题列表中列出的另一个问题。

辅助功能问题

弹出窗口的最大缺点是它们将焦点从主浏览器窗口移开，这可能会令人感到不安。 除了可访问性之外，它们还提出了一般的可用性问题。 您有多少次看到某人启动弹出窗口，然后无意中单击了启动器窗口，又以为没有任何React，再次单击该链接却没有结果？ 当然，该窗口已打开，但现在位于启动器窗口下方，只有向下移动到任务栏并从中选择窗口才能解决此问题。

技巧是通知用户该链接将在新窗口中打开。 有多种解决方法：

• 将说明作为链接本身的一部分
• 在标题属性中添加一些说明
• 使用适当的图标表示即将到来的弹出窗口

这样，如果失去焦点，则用户可以建立连接，例如：

打开我的测试页（在弹出窗口中打开）

打开我的测试页

要解决在主窗口上失去焦点的问题，可以使用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">

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

只有一个链接可以维护，并且正确的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>

或者，使用一些实际示例：

这个
是我的弹出链接（控制台模式）
这个
是我的弹出式窗口（固定模式）
这个
是我的（弹性模式）

注意：“ return false”部分有效地取消了href的默认操作，因此它不会打开弹出窗口和普通HTML窗口，而是会打开一个窗口或另一个窗口。 尝试上面的链接（启用和不启用JavaScript）亲自查看。

你还能要求什么呢？ 好吧……这块蛋糕还有最后一块糖衣。

关闭弹出窗口

弹出窗口打开后，我们可能会依靠人们使用浏览器/操作系统控件来关闭新打开的窗口。

但是人们并不总是这样做！ 因此，我们应该在弹出窗口本身中提供一个链接（或按钮，如果您愿意的话），以允许用户关闭它。 但是，假设我们的用户已禁用脚本，并且已通过标准href路径打开了弹出窗口。 您若有所思地提供的“关闭此窗口”链接将提示如下所示的不太友好的对话：

要解决此问题，您应该使用JavaScript编写指向Web页面的关闭链接，并检查该窗口是否作为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相机或访问“世界上最大的在线娱乐场”，但不知道，那就是！

翻译自: https://www.sitepoint.com/perfect-pop-up/

java窗口按钮弹出窗口