2010-03-10 7 views
9

Ich habe das folgende Stück HTML-Code, um ein neues Fenster erstellt, wenn darauf geklickt:erstellen W3C validierte Anker-Link mit target = „_ blank“

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

Problem ist, dass es nicht den W3C-Validator nicht besteht. Wie erstelle ich einen Link wie den oben genannten, der validiert?

+3

10 Vielleicht ist es für andere Menschen offensichtlich, aber diese Frage ergibt für mich keinen Sinn. Können Sie ein wenig ausarbeiten? –

Antwort

9

verwenden doctype:

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

1,0 Gangs einige HTML "Legacy" Code aufnimmt, einschließlich Ziel = "_ blank".

+0

Gibt es irgendwelche Möglichkeit, um die gleiche Funktionalität ohne Rückgriff auf den Übergangsdoctype zu bekommen? – Nate

+3

Nicht ohne JavaScript zu verwenden. (Siehe den Beitrag von @ajm unten) Grund, warum das entfernt wurde, war aufgrund der Zugänglichkeit und Benutzerinteraktion. Benutzer wollen die Kontrolle über das Zeug, Keine Popups. :) – ghoppe

6

Unter der Annahme von striktem XHTML würden Sie ein onclick-Ereignis an den fraglichen Anker binden. Etwas wie:

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

Man würde auch argumentieren, dass Sie mit externen JavaScript dass Onclick Aktion separat verbindlich sollten durch fortschreitende Verbesserung und Trennverhalten von Ihrem Markup, aber das ist der einfachste Weg, um darüber zu gehen.

+6

Kleinere Kritik: DRY! Ersetze die URL im Onclick-Event-Handler mit 'this.href'. Verschiebe auch das ganze Ding in eine JavaScript-Datei, anstatt deinen HTML-Code zu überladen. –

1

Sie können es nicht mit strenger W3C-Validierung tun.

Die Lösungen sind:

 
    $(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; 
      }); 
    }); 
  • Auch nach this doctype page sollte HTML5 Ziel atrtribute erlauben validiert werden, fow was es wert ist.
+0

1.) Du solltest nicht ' t Verwenden Sie die Markup-Namen als Großbuchstaben, verwenden Sie stattdessen Kleinbuchstaben 2.) Es gibt einen syntaktischen Fehler in diesem Code: Es gibt ein "Größer-als-Zeichen" vor "false" 3.) Yo Sie sollten deutlich angeben, dass dies zwei separate Lösungen im jQuery-Code sind. – Sk8erPeter

+0

@ Sk8erPeter - was ist der Grund für # 1? – DVK

+0

natürlich funktioniert beides in jQuery, da es Tags ohne Berücksichtigung der Groß- und Kleinschreibung behandelt. Es ist eher eine Namenskonvention; für XHTML-Kompatibilität sollten Sie lieber auch Kleinbuchstaben in der HTML-Formatierung verwenden, da XHTML-Dokumente [nur Kleinbuchstaben verwenden können] (http://www.w3.org/TR/xhtml1/diffs.html#h-4.2) . Sie sollten diese Konventionen also auch in Ihren JavaScript-Codes einhalten. :) [Hier sind einige interessante Aspekte] (http://wiki.answers.com/Q/Should_you_use_upper_case_or_lower_case_HTML_tags), und [hier ist ein anderer] (http://www.websiteoptimization.com/speed/tweak/lowercase/). – Sk8erPeter

5
  1. Validierung wird das nicht alles sein und alle Codierungsqualität beenden.

  2. Einige Dinge sind "Standard" in Browsern, ohne ein W3C-Standard zu sein.

  3. Mit ein wenig JS ist ein wenig Overkill, wenn die Funktion bereits existiert.

+1

Was ist, wenn die W3C-Validierung eine Standardcodierungsanforderung ist? – Aye

+0

Tatsächlich. Validierung ist ein großartiges Werkzeug, aber es ist nicht wie W3C Götter, die alles richtig machen. Die Standards sind nicht perfekt – PatrikAkerstrand

+0

@Lemurik: Jeder Browser versteht und akzeptiert target = "_ blank". Nur weil es nicht im W3C-Standard enthalten ist, ist es nicht falsch. – PatrikAkerstrand

3

Wenn es nur ein oder zwei Links ist, können Sie es tun inline mit

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

Mehr als das und Sie wollen wahrscheinlich eine der js oben genannten Lösungen.

+0

Ich mag diesen. Vielen Dank! – Chris

5

Ich denke, du stellst die falsche Frage. Das Zielattribut ist in striktem XHTML 1.0 nicht gültig, egal ob Sie es mit JavaScript einfügen oder in der Serverantwort haben.

Wenn Sie dieses Attribut wirklich wollen, müssen Sie einen anderen Doctype verwenden, aber das ist auch nicht die richtige Antwort.

Sie sollten sich fragen, warum Sie das Attribut möchten. Ich vermute, Sie versuchen, eine neue Registerkarte oder ein neues Fenster zu erstellen. Unnötig zu sagen, dass dies allgemein als schlechtes Design angesehen wird (es nimmt die Kontrolle vom Benutzer weg), aber wenn Sie es wirklich tun wollen, könnten Sie es mit JavaScript machen.

Hier ist, wie:

Ihre Links halten aber eine spezielle Klasse hinzufügen, zum Beispiel "Popup" zu ihnen. Fügen Sie dann eine JavaScript-Zeile hinzu (vorzugsweise mit einem Framework wie jQuery oder Prototype, um es einfacher zu machen), die alle Links mit dieser Klasse aufnimmt und ihnen einen On-Click-Handler gibt, der zur Erstellung eines neuen Tabs/Fensters führt und den Standard bricht Aktion (dh stoppt die Verbindung von der Arbeit als Link). Das wird die Leute immer noch nerven, da es das erwartete Verhalten außer Kraft setzt.

Was Sie nicht tun sollten, ist die Links mit Dummy-Links zu ersetzen und auf JavaScript für die Links zu funktionieren.

Ignorieren Sie das. Das Attribut target ist nicht mehr in HTML veraltet (der lebende Standard oder "5", je nachdem, ob Sie WHAT WG oder W3C folgen). Die richtige Antwort ist heute nur Ihre DOCTYPE mit diesem ersetzen:

<!doctype html> 

Beachten Sie, dass es nicht mehr in Großbuchstaben sein muss, noch tatsächlich aussehen wie ein vollwertiges SGML DOCTYPE-Deklaration. Es ist nur ein verkümmertes Artefakt, das das Dokument als standardkonformes HTML identifiziert.

+0

Ich habe nicht viele externe Links, nur eine in der Tat. Mein Dokument wurde vollständig für das neue Fenster validiert. Ich habe hier viele Lösungen gesehen. Danke für deine Antwort – Chris

1
  1. hinzufügen rel="new-window" Attribut auf den Link (statt target="_blank")
  2. add jquery Skript Leiter der Seite und fügen Sie den folgenden Ausschnitt

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

(Bitte beachten Sie, dass, wie ich getippt das habe ich im stackoverflow textbox nicht getestet.)

1

Eigentlich sind die hier vorgeschlagenen Lösungen mit ad Das "target" -Attribut durch JavaScript zu halten, ist völlig normkonform!

Die Sache ist, dass nach der W3C DOM Level 1 Spezifikation die Schnittstelle HTMLLinkElement DO Zielattribut haben, obwohl das A-Element aus HTML 4.01-Spezifikation es nicht haben.

Es ist also ungültig, "Ziel" -Attribut in HTML-Datei zu schreiben, aber es ist gültig, es später über DOM-Schnittstellen mit JS zum Dokumentbaum hinzuzufügen.

1

Wenn Sie eine Anforderung für Barrierefreiheit oder plattformübergreifende Interoperabilität haben, möchten Sie Ihre Webseite wahrscheinlich validieren. Es gibt ein nettes Dokument, das die Frage "Warum validieren?" Beantwortet. Gepostet von W3.org http://validator.w3.org/docs/why.html

IMHO, es zeigt, dass Sie sich um Ihr Publikum kümmern, wenn Sie die zusätzliche Zeit zur Validierung nehmen. Dann werden Sie Seiten haben, die in IE, Opera, Safari und Firefox nahezu identisch sind.

-1
<a href="..." onclick="return !window.open(this.href)">...</a> 
2

Statt mit:

target = "_ blank"

Verwendung:

Onclick = "this.target = '_ blank'"

N ote die einfachen Anführungszeichen innerhalb der Anführungszeichen. Dies löste das Validierungsproblem für mich, ohne den Doctype neu definieren zu müssen.