【问题标题】:Create a W3C validated anchor link with target="_blank"使用 target="_blank" 创建一个 W3C 验证的锚链接
【发布时间】:2011-01-26 02:43:14
【问题描述】:

我有以下 HTML 片段,点击时会创建一个新窗口:

<a href="/path/to/site" target="_blank">glide by the people</a>

问题是它没有通过 W3C 验证器。如何创建一个像上面那样验证的链接?

【问题讨论】:

标签: css xhtml target


【解决方案1】:

而不是使用:

target="_blank"

使用:

onclick="this.target='_blank'"

注意双引号内的单引号。这为我解决了验证问题,无需重新定义文档类型。

【讨论】:

    【解决方案2】:

    我认为你问错了问题。 target 属性在严格的 XHTML 1.0 中是无效的,无论您是使用 JavaScript 插入它还是仅仅将它放在服务器响应中。

    如果你真的想要那个属性,你必须使用不同的文档类型,但这也不是正确的答案。

    您应该问自己为什么需要该属性。我猜你正在尝试创建一个新的选项卡或窗口。不用说,这通常被认为是糟糕的设计(它剥夺了用户的控制权),但如果你真的想这样做,你可以使用 JavaScript。

    方法如下:

    保留您的链接,但添加一个特殊的类,例如“弹出”给他们。然后添加一行 JavaScript(最好使用 jQuery 或 Prototype 之类的框架以使其更容易)获取该类的所有链接并为它们提供一个单击处理程序,从而创建一个新的选项卡/窗口并取消默认值操作(即停止链接作为链接工作)。不过,这仍然会惹恼人们,因为它会覆盖预期的行为。

    您不应该做的是将链接替换为虚拟链接并依赖 JavaScript 来使链接正常工作。

    忽略这一点。 target 属性在 HTML 中不再被弃用(生活标准或“5”,取决于您遵循 WHAT WG 还是 W3C)。今天的正确答案是用这个替换你的 DOCTYPE:

    <!doctype html>
    

    请注意,它不再必须是大写字母,也不必看起来像一个完整的 SGML DOCTYPE 声明。它只是将文档标识为符合标准的 HTML 的残留人工制品。

    【讨论】:

    • 我没有很多外部链接,实际上只有一个。我的文档已完全验证接受新窗口部分。我在这里看到了很多解决方案。感谢您的回复
    【解决方案3】:

    W3C 严格验证无法做到这一点。

    解决办法是:

    $(文档).ready(函数(){ $('A[rel="_blank"]').each(function() { $(this).attr('target', '_blank'); }); }); // ...要么... $(文档).ready(函数(){ $('A[rel="_blank"]').click(function() { window.open($(this).attr('href')); 返回假; }); });
    • 另外,根据this doctype page,HTML5 应该允许验证目标属性,看看它的价值。

    【讨论】:

    • 1.) 您不应使用大写的标记名称。请改用小写字母。 2.) 此代码中存在语法错误:false 之前有一个“大于”符号。 3.) 您应该在 jQuery 代码中明确指出这是 2 个单独的解决方案。
    • @Sk8erPeter - #1 的原因是什么?
    • 当然,两者都在 jQuery 中工作,因为它以不区分大小写的方式处理标签。这是一个命名约定。为了与 XHTML 兼容,您也应该在 HTML 格式中使用小写标签,如 XHTML 文档can only use lowercase tags。所以你也应该在你的 JavaScript 代码中遵守这些约定。 :) Here are some interesting aspectshere's another one
    【解决方案4】:
    <a href="..." onclick="return !window.open(this.href)">...</a>
    

    【讨论】:

      【解决方案5】:

      如果您需要可访问性或跨平台互操作性,您可能希望验证您的网页。有一个很好的文档回答了关于“为什么要验证?”的问题。由 W3.org 发布 http://validator.w3.org/docs/why.html

      恕我直言,当您花额外的时间进行验证时,这表明您关心您的观众。然后,您将拥有在 IE、Opera、Safari 和 Firefox 上显示几乎相同的页面。

      【讨论】:

        【解决方案6】:

        实际上,这里提出的通过 JavaScript 添加“target”属性的解决方案完全符合标准!

        问题是,根据 W3C DOM Level 1 规范,接口HTMLLinkElement 具有目标属性,尽管 HTML 4.01 规范中的 A 元素没有。

        所以在html文件中写入“target”属性是无效的,但是稍后使用JS通过DOM接口将其添加到文档树中是有效的。

        【讨论】:

          【解决方案7】:
          1. rel="new-window" 属性添加到链接(而不是target="_blank"
          2. 将jquery脚本添加到页面头部并添加以下sn-p

            <script type="text/javascript">
                $(document).ready(function(){
                    $('a[rel="new-window"]').click(function(){
                        window.open(this.href);
                    })
                });
            </script>
            

          (请注意,当我在 stackoverflow 文本框中输入此内容时,我尚未对其进行测试。)

          【讨论】:

            【解决方案8】:

            如果只是一两个链接,可以内联

            <a href="http://stackoverflow.com" onclick="window.open(this.href); return false;"></a>
            

            不仅如此,您可能还想要上述 js 解决方案之一。

            【讨论】:

              【解决方案9】:
              1. 验证并不是编码质量的全部。

              2. 有些东西在浏览器中是“标准的”,而不是 w3c 标准。

              3. 当函数已经存在时,使用一点 JS 有点矫枉过正。

              【讨论】:

              • 如果 W3C 验证是编码标准要求怎么办?
              • 确实如此。验证是一个很好的工具,但它不像 W3C 是把一切都做好的神。标准并不完美
              • 都是好点,但另一方面,标准是标准是有原因的。不使用 target="_blank" 有可用性和可访问性的原因。 (它会破坏后退按钮、一些用户代理等。)强制打开新窗口是个坏主意。
              • @Machine 这并不意味着它仍然不是一个坏主意。
              • @Machine - 你错过了我的观点。用户可能完全合法地需要遵守 W3C 验证器,无论他、您或我对验证器的准确性、有用性和优点的看法如何。
              【解决方案10】:

              假设使用严格的 XHTML,您可以将 onclick 事件绑定到相关锚点。比如:

              <a href="/path/to/my/link" onclick="window.open('/path/to/my/link');return false;">My link</a>
              

              还有人认为,由于渐进式增强和将行为与标记分开,您应该将该 onclick 操作与外部 JavaScript 单独绑定,但这是实现它的基本方法。

              【讨论】:

              • 轻微抱怨:干!将 onclick 事件处理程序中的 URL 替换为 this.href。此外,将整个内容移动到 JavaScript 文件中,而不是弄乱您的 HTML。
              【解决方案11】:

              使用此文档类型:

              <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhmtl1/DTD/xhmtl1-transitional.dtd"> 
              

              1.0 过渡版可容纳一些 html“遗留”代码,包括 target="_blank"。

              【讨论】:

              • 有没有办法在不使用过渡文档类型的情况下获得相同的功能?
              • 不使用 javascript。 (请参阅下面@ajm 的帖子)将其删除的原因是由于可访问性和用户交互。用户想要控制这些东西,而不是弹出窗口。 :)
              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 2021-08-21
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2011-05-24
              相关资源
              最近更新 更多