Create a W3C validated anchor link with target=“_blank”

前端 未结 11 1761
臣服心动
臣服心动 2021-01-04 22:51

I have the following piece of HTML that creates a new window when clicked:

glide by the people


        
相关标签:
11条回答
  • 2021-01-04 23:21
    1. Add rel="new-window" attribute to the link (instead of target="_blank")
    2. add jquery script to head of page and add the following snippet

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

    (Please note that as I typed this in the stackoverflow textbox, I haven't tested it.)

    0 讨论(0)
  • 2021-01-04 23:21

    If you have a requirement for Accessibility or Cross-Platform Interoperability, you likely want to validate your web page. There is a nice document answering the question about "why validate?" posted by W3.org http://validator.w3.org/docs/why.html

    IMHO, it shows you care about your audience, when you take the extra time to validate. Then, you will have pages that show virtually the same on IE, Opera, Safari, and Firefox.

    0 讨论(0)
  • 2021-01-04 23:21

    You can not do it with W3C strict validation.

    The solutions are:

    • Transitional doctype as already mentioned

    • A different validator (e.g. CSE)

    • Use JavaScript to replace "_blank" - see http://www.ajaxblender.com/open-links-new-window-w3c-valid-target-blank.html (the link shows how to do it real neatly with jQuery - I am pasting the 2 examples below).

        $(document).ready(function(){
              $('A[rel="_blank"]').each(function() {
                   $(this).attr('target', '_blank');
              });
         });
         // ...OR...
         $(document).ready(function(){
              $('A[rel="_blank"]').click(function() {
                   window.open($(this).attr('href'));
                   return false;
              });
         });
    
    • Also, as per this doctype page, HTML5 should allow target atrtribute to be validated, fow what it's worth.
    0 讨论(0)
  • 2021-01-04 23:24

    Actually, the proposed here solutions with adding the "target" attribute through JavaScript are completely standards compliant!

    The thing is that according to the W3C DOM Level 1 specification the interface HTMLLinkElement DO have target attribute, although the A element from HTML 4.01 specification do not have it.

    So it's invalid to write "target" attribute in html file, but is valid to add it to the document tree later via DOM interfaces using JS.

    0 讨论(0)
  • 2021-01-04 23:25

    I think you're asking the wrong question. The target attribute is not valid in strict XHTML 1.0 no matter whether you insert it with JavaScript or just have it in the server response.

    If you really want that attribute, you have to use a different doctype, but that's not really the right answer either.

    You should ask yourself why you want the attribute. I'm guessing you're trying to create a new tab or window. Needless to say this is generally considered bad design (it takes control away from the user), but if you really want to do it, you could do it with JavaScript.

    Here's how:

    Keep your links but add a special class, e.g. "popup" to them. Then add a line of JavaScript (preferably using a framework like jQuery or Prototype to make it easier) that takes all links with that class and gives them an on-click handler that results in the creation of a new tab/window and cancels the default action (i.e. stops the link from working as a link). That will still annoy people as it overrides the expected behaviour, though.

    What you should not do is replace the links with dummy links and rely on JavaScript for the links to work.

    Disregard that. The target attribute is no longer deprecated in HTML (the living standard or "5", depending on whether you follow WHAT WG or the W3C). The correct answer today is to just replace your DOCTYPE with this:

    <!doctype html>
    

    Note that it no longer has to be uppercase nor actually look like a full SGML DOCTYPE declaration. It's just a vestigial artefact identifying the document as standards compliant HTML.

    0 讨论(0)
  • 2021-01-04 23:27
    1. Validation isn't the be all and end all of coding quality.

    2. Some things are "standard" in browsers without being a w3c standard.

    3. Using a bit of JS is a little overkill when the function already exists.

    0 讨论(0)
提交回复
热议问题