Create a W3C validated anchor link with target="_blank"
I have the following piece of HTML that creates a new window when clicked:
<a href="/path/to/site" target="_blank">glide by the people</a>
Problem is that it does not pass the开发者_如何转开发 W3C validator. How do I create a link like the above that does validate?
Use this doctype:
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhmtl1/DTD/xhmtl1-transitional.dtd">
1.0 transitional accommodates some html "legacy" code, including target="_blank".
Assuming strict XHTML, you would bind an onclick event to the anchor in question. Something like:
<a href="/path/to/my/link" onclick="window.open('/path/to/my/link');return false;">My link</a>
One would also argue that you should be binding that onclick action separately with external JavaScript due to progressive enhancement and separating behavior from your markup, but that's the basic way to go about it.
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.
Validation isn't the be all and end all of coding quality.
Some things are "standard" in browsers without being a w3c standard.
Using a bit of JS is a little overkill when the function already exists.
If it's just one or two links, you can do it inline with
<a href="http://stackoverflow.com" onclick="window.open(this.href); return false;"></a>
More than that and you probably want one of the js solutions above.
Instead of using:
target="_blank"
use:
onclick="this.target='_blank'"
Note the single quotes inside of the double quotes. This solved the validation problem for me, without having to redefine the doctype.
- Add
rel="new-window"attribute to the link (instead oftarget="_blank") 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.)
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.
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.
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.
<a href="..." onclick="return !window.open(this.href)">...</a>
加载中,请稍侯......
精彩评论