链接和JavaScript共存关系

日期:2011年08月23日

这似乎不是一个星期,有人不要求有关如何正确地执行一些JavaScript的链接。不幸的是,他们通常不会驱使他们的问题给他人带来帮助,因为他们正试图使可用,并尽可能访问其网站。

那么,是什么问题?

最可能出现的问题,使他们远离他们的故障排除的会议,以及许多讨论,列出我同意,的文件“跳跃”回到顶端点击一个链接时。其他时候,它的行为不正确,或直接抛出一个错误的Ja​​vaScript。

那么,有什么解决方案

几乎总是有反应,告诉海报添加后立即执行JavaScript语句(S),或在JavaScript语句(S )的 href与前缀属性的JavaScript的onclick 事件处理程序return false:伪协议,而不是使用在所有的onclick事件处理程序 。这太糟糕了,这些解决方案都没有真正解决更大的问题-如何使链接以及降低非JavaScript的用户。

如果我们试图以适应非JavaScript的用户,为什么使用JavaScript?

原因有很多从一个链接的JavaScript执行。最常见的用途涉及到其他页面的导航,在弹出窗口中打开一个链接,或者更糟的是,提交表单。所有这些原因而不能离开非JavaScript的用户可以得到解决。一些不太常见的原因通常涉及更复杂的JavaScript驱动的function 。然而,而function 可能无法被非JavaScript的用户,特别是在DHTML的情况下,复制,用来触发此function 的链接可以被用来执行服务器端的function ,模仿或重复或告知非JavaScript的用户,他们会得到,如果他们使用支持JavaScript的浏览器。

那么,真正解决方案

解决方案是思考的JavaScript功能 将提供如何完成相同的任务没有。得到它不先工作,然后添加JavaScript启用JavaScript的浏览器,以加强它。让我们看看一些常见的原因。

什么是最常见的原因及其解决方案

在弹出窗口中打开链接

一般来说,开发商将打开链接,在弹出的两种方式之一:

执行的JavaScript 的onclick事件处理程序和设置的href 属性值“#” 。
<a href="#" onclick="win​​dow.open('somedoc.html', 'newWindow')">点击这里</ A>  
从执行的JavaScript 方式的JavaScript href 属性:伪协议 。
<a href="JavaScript:window.open('somedoc.html', 'newWindow')">点击这里</ A>  
注意:
这第二个例子是特别恶劣的,因为它会导致链接到用户喜欢Shift +点击链接在新窗口打开,除非他们支付在状态栏上的地址密切关注,并注意到它的执行打破JavaScript语句。

充电前思考这些方法中的任何一个解决方案,以上尝试在您的浏览器禁用了javascript代码。你会注意到的第一个例子将导致您的浏览器跳转回文件的顶部,如果你都可以看到滚动的链接,并做绝对没问题的第二个例子。那么,让我们谈谈我们将如何使这项工作,以及非JavaScript的用户。

刚才你怎么非JavaScript的用户打开一个新窗口?

访问弹出窗口的开端是在使用目标的属性<A>标签。我们完成它放在它所属的链接-在href 属性的非JavaScript的用户 。

<a href="somedoc.html" target="newWindow">点击这里</ a>  
但有关启用JavaScript的用户看中弹出的是什么?

若要浏览器中打开一个弹出窗口,我们自己设置的基础上,我们必要的JavaScript的onclick事件处理 。除了 ​​这一点JavaScript,我们一定要加一个return false语句的最后一位,保持浏览器执行默认的行为与目标的联系-打开一个正常的浏览器窗口。我们不再需要代码两次使用的文件和新的窗口名称在这种情况下,这使得包含对象的一个引用的关键字, <A>标签。使用这个关键字和object.property符号,我们可以访问的href属性值和目标属性的值。

<a href="somedoc.html" target="newWindow" onclick="win​​dow.open(this.href, this.target);return false">点击这里</ A>  
恭喜!你做你的第一个完全访问弹出窗口。

那么什么是一些链接在执行JavaScript的其他常见原因的解决方案

如果你想提交的形式从一个链接,停止,直接去坐牢,不收$ 200.00。除了众多的预期行为的形式,你打破不使用提交按钮的一些品种(我们这里所说的关于可用性)的,你不必要绝育非启用JavaScript的用户的形式。在未来的几年,我一直在玩这个网页游戏,我还没有遇到过一个以这种方式打破形式的正当理由。

如果你打算使用一个链接的原因是让你有一个图形化的“提交”按钮,停止,去阅读HTML规范,不收取$ 200.00 -您好,此function 已经内置在通过<INPUT>标签图像的 类型属性的价值。如果你坚持执行别人的设计,他们坚持提交按钮后翻车,有更好的替代品,不破的非JavaScript的用户形式。

什么是一个不太常见的原因和可能的解决方案之一例子吗?

假设你有一个应用程序,列出了事件的数量 。这些事件可以在任何类别的数量 。使用DHTML,你想给用户的浏览器,看看有什么事件属于哪些类别,对飞,不重载页面的能力。你做什么非JavaScript的浏览器,使他们获得相同的最终结果,尽管页面重载吗?

首先,我们没有的DHTML应用程序。我们通过用户点击应用程序,所以它知道什么日历上的日期,并在下面的清单事件“突出”的有关类别的信息 - 这是简单的一部分。

然后,我们写一个JavaScript函数来更改日历中的日期和房源的个别事件的背景和前景颜色,改变颜色的链接,用户点击表明其中之一是“选定” 。我们调用这个类使用的链接的onclick 事件处理程序的function 。由于这个例子中使用JavaScript,并非所有支持JavaScript的浏览器能够理解,我们要确保函数调用是由开头return 声明。我们还确保该函数return 一个布尔值,如果浏览器不支持的方法(S),我们正在使用,所以它将遵循就像非JavaScript的浏览器的链接,或以其他方式一个布尔值 false,这样的DHTML 没有浏览器可以执行下面的链接。

该函数

function selectEvents(category_id){如果return true(!的document.getElementById); / / DHTML位去这里return false;}  

调用函数

<a href="/calendar/february/2002/6/1" onclick="return selectEvents(1)">滑雪</ A>  

所以,我该怎么办,如果是不可能复制的function 服务器端?

如果由于某种原因你不能复制与一些服务器端有心计的function ,那么只需使用 href 属性的链接到一个文档,将解释什么是可以通过使用JavaScript功能 的浏览器获得 。要执行的JavaScript,使用的onclick事件处理程序,记住添加return  false在最后的声明,以防止从以下链接启用JavaScript的浏览器。你也可以考虑使用onmouSEOver和onmouSEOut事件处理程序写入到状态栏来掩盖非JavaScript的用户文件的链接,以防止混乱启用JavaScript的用户,他们应该在状态栏,当鼠标移到的链接。如果您的JavaScript语句提供的function 是与所有的JavaScript功能 的浏览器不兼容,那么你可以考虑前面的函数调用return 在上面的例子声明。

执行JavaScript是所有JavaScript功能 的浏览器兼容

<a href="js_required.html" onmouSEOver="win​​dow.status = 'click here';return true;" o​​nmouSEOut="win​​dow.status = '';" onclick="myFunction();return false;">点击这里</ A>  

执行JavaScript是所有JavaScript功能 的浏览器兼容

<a href="js_required.html" onmouSEOver="win​​dow.status = 'click here';return true;" o​​nmouSEOut="win​​dow.status = '';" onclick="return myFunction()">点击这里</ A >  

总之

我还没有覆盖所有的可能性,或者内链接调用JavaScript的原因 。不过,我希望你已经看到了,有办法这样做,有页面尽可能正常地降低。如果我没有触及的东西你挣扎后,我希望我已经给了足够的启发和引导,鼓励你找到最有用的和可访问的解决方案可能。链接和JavaScript真的可以和睦相处。

Tags:可用性
上一篇文章:用户如何在网页上阅读
下一篇文章:网站的更新维护才是最重要的