$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, '_blank');
});
}
});
Sie können dies direkt mit HTML tun, aber das ist ungültige Markup. Dies erledigt die Arbeit ohne ungültigen Code und unnötige Markup.
Oder Sie können die Validierungsprobleme immer noch vermeiden und einfach die Klasse target=_blank zu allen Links mit href-Attributen hinzufügen, die mit http:// beginnen. Das folgende Beispiel zielt nur auf Links in einem #content-Bereich ab. Eine solche Eingrenzung kann eine gute Idee sein, falls Ihre Menüs dynamisch sind und vollständige URLs erstellen.
$("#content a[href^='http://']").attr("target","_blank");
Beachten Sie auch, dass es eine Vielzahl von Möglichkeiten gibt, nur externe Links anzusprechen.
Eine leicht andere Version, wenn Sie nur bestimmte URLs ansprechen möchten (ich verwende das rel-Tag „external“)
$('A[rel="external"]')
.click( function() {
window.open( $(this).attr('href') );
return false;
});
Guter Schnipsel, Paul, das ist viel besser, und wunderschön unaufdringlich und validiert in XHTML 1 strict. Es ist an der Zeit, dass die Welt aufhört, aufdringliches JavaScript zu verwenden.
Danke, Paul! Das war sehr nützlich.
Sehr nützliche Technik. Vielen Dank
Hier ist etwas, das meiner Meinung nach einen großen Wert hinzufügen wird. Ich habe gerade versucht, alle Links zu ignorieren, die zur Seite gehören, und die externen Links direkt zu identifizieren.
Gibt es eine Möglichkeit, die Größe des aufpoppenden Fensters zu ändern?
Gute Lösung
Das ist großartig. Genau das, was ich für die Website eines Kunden brauchte. Und danke Paul, das funktioniert wunderbar.
Hier ist ein Schnipsel, den wir verwenden, der ähnlich wie Pauls funktioniert und Unterstützung für target „_blank“, „parent“, „top“ und „popup“ hinzufügt
Wenn der Code verzerrt ist, holen Sie ihn hier: http://www.id3.co.th/js/lib.js (suchen Sie nach „links and popups“)
Sie aktivieren ihn dann auf Ihren Seiten, indem Sie externallinks(); in Ihr $(document).ready(function(){ einfügen
Wenn der Code verzerrt ist, überprüfen Sie die Quelle von http://www.id3.co.th/ (suchen Sie nach „.ready(function“)
Ich hoffe, das hilft!
window.onload = externallinks; für Situationen ohne jquery
Wenn Sie einen guten Grund haben, bestimmte Links in einem neuen Fenster zu öffnen, und reines HTML verwenden möchten, könnten Sie einfach zum HTML5-Doctype wechseln.
Es sind die kleinen Dinge im Leben! Kleiner Code, riesige Lösung!
target=”_blank” und vergessen Sie einfach XHTML strict, das ist übrigens tot.
Alle reden jetzt von HTML5. Warum verschwenden Sie Ihre Zeit mit diesen unbedeutenden Problemen?
Ich stimme Ihnen zu. Warum sich mit Skripten herumschlagen, wenn wir bereits target „_blank“ haben? Außerdem funktioniert es auch für Leute mit deaktiviertem JavaScript! Ist das vielleicht kein Anliegen mehr?
Denn selbst im Jahr 2010 verstehen die Leute immer noch nicht die Rolle der Validierung. Sie ist ein Werkzeug, keine Errungenschaft. Erinnern Sie sich an den Hype um das Compliance-Badge!?
Wenn Sie jQuery verwenden, sollten Sie delegate verwenden. So erstellen Sie 1 Ereignisbindung am body-Element anstelle von Hunderten, jeweils auf einem Link.
Der Code würde ungefähr so aussehen
$(‘body’).delegate(“a”,”click”,function() {
var a = new RegExp(‘/’ + window.location.host + ‘/’);
if(!a.test(this.href)) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, ‘_blank’);
}
});
Technisch gesehen ist es eine gute Lösung.
Andererseits könnte es Designer dazu verleiten, es zu verwenden, wann immer sie können. Öffnen Sie niemals ein neues Fenster, es sei denn, es ist absolut notwendig oder ist zu 100 % benutzerfreundlich. Wenn alle externen Links in einem neuen Fenster geöffnet werden, ist keines davon der Fall.
Für MooTools ist es sehr ähnlich
Gute Arbeit. Ich denke, dieser Beitrag beschreibt das gut und ist auch eine perfekte Lösung!!!
http://praveenbattula.blogspot.com/2010/06/open-all-anchor-links-in-new-window.html
Hallo…
Kann ich Code haben, um ein iframe-Inhalt dynamisch zu poppen……..
Danke
@nachomaans
Wie kann ich den von Ihnen angegebenen Code kopieren und in den Abschnitt .einfügen? Aber ich bin mir nicht sicher, ob ich dieser Zeile folge: Sie aktivieren ihn dann auf Ihren Seiten, indem Sie externallinks(); in Ihr $(document).ready(function(){ einfügen
Wo kann ich es verwenden?
Übrigens, ich habe es in meinem WordPress-Blog ausprobiert
Ich glaube, mein Kommentar kommt ziemlich spät in Bezug auf diesen Beitrag, aber ich habe ein kleines jQuery-Plugin dafür geschrieben, das auf dem Wissen basiert, das ich aus diesem Beitrag und meinen Lektüren über die Entwicklung von jQuery-Plugins in der letzten Woche gewonnen habe. Bitte finden Sie den Link zum Plugin und dem zugehörigen Beitrag, hoffentlich entspricht es den Standards der jQuery-Plugin-Entwicklung.
http://www.uipress.com/extlink-a-jquery-plugin-to-add-target_blank-to-external-and-file-links/
Mit freundlichen Grüßen,
Bilal Awan
Eine kleine Optimierung: Da sich der RegExp nicht ändert, verschieben Sie ihn aus der Schleife, sodass er nur einmal definiert (und kompiliert) wird. Es gibt keinen Sinn, ihn bei jedem Schleifendurchlauf neu zu definieren.
Außerdem ist anzumerken, dass dies nur funktioniert, wenn alle internen Links einen vollständigen absoluten Pfad haben. Da er mit dem Hostnamen verglichen wird, muss jeder Link den Hostnamen enthalten. Relative Links in der Form /link/to/something oder link/to/something werden als externe Links behandelt.
Ich habe das Dollarzeichen in meinem Code-Schnipsel vergessen! Hier ist der richtige Code
var a = new RegExp('/' + window.location.host + '/'); $('a').each(function() { if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation(); window.open(this.href, '_blank'); }); } });Wie benutzt man diesen Code?
Ich weiß nichts über jQuery, ich füge den Code einfach in den HTML-Head ein und erhalte diese Fehlermeldung im Chrome Web Inspector
el Abee.. Sie müssen zuerst die eigentliche jQuery-Bibliothek einbinden und dann sicherstellen, dass der tatsächliche Code, den Sie einfügen, innerhalb von <script></script>-Tags liegt und dass diese beiden Tags innerhalb der <head></head>-Tags liegen. Und übrigens muss auch das Einbinden von jQuery zwischen den Head-Tags erfolgen.
Sir, ich habe ein Problem: Es gibt Thumbnails auf meiner Seite. Wenn ein Benutzer darauf klickt, möchte ich, dass das größere Bild dieses Thumbnails in einem neuen Div-Fenster geöffnet wird.
Ausgezeichneter Tipp, danke
Hier ist, was wir tun
<a href=”irgendwo” class=”newWindow”>
und in der jQuery-Datei verwenden wir
function setupNewWindow(){
$(‘.newWindow’).click(function(){window.open($(this).attr(‘href’)); return false;});
}
Ich habe jede mögliche Variante von $(‘a[rel=”external”]) ausprobiert, die mir eingefallen ist. Ich habe doppelte Anführungszeichen, einfache Anführungszeichen verwendet, versucht, [rel^=”external”] zu verwenden, um nur nach einem Link zu suchen, der mit… beginnt, ich habe den Code kopiert und eingefügt, anstatt ihn zu tippen. Ich habe sichergestellt, dass beliebiger jQuery-Code anstelle dieses Skripts funktioniert. Ich habe sichergestellt, dass mein WordPress enqueue_script ordnungsgemäß funktionierte. Ich habe ähnliche Skripte von anderen Websites ausprobiert. Ich habe gegoogelt, bis meine Finger bluteten…
…und immer noch funktioniert nichts, das [rel=””] verwendet, bei mir. Ich benutze die neueste jQuery-Bibliothek vom jQuery CDN (zum Zeitpunkt des Schreibens dieses Kommentars 1.7.1 minified). Fehlt mir etwas? Nimmt diese Version von jQuery [rel=””] nicht auf?
Wenn ich [rel=”external”] entferne, funktioniert es, aber für jeden Link (was zu erwarten ist, da es keine Bedingung gibt). Ich habe etwas anderes geschrieben, das funktioniert und eine Ableitung ist, aber [rel=”external”] scheint einfach so viel eleganter zu sein und ich würde es lieber verwenden.
Hier ist mein Skript
Gerade eine Sache an der ersten Zeile meines obigen Kommentars bemerkt. $(‘a[rel=”external”]) sollte $(‘a[rel=”external”]’) sein.
Irgendwelche Ideen, warum das passiert? :-(
Entschuldigung, ich könnte falsch liegen, aber die hier gezeigten Beispiele funktionieren nicht, wenn das Attribut mit dem „external“ ein Attribut ist, wie zum Beispiel „nofollow“ oder „author“. Ich habe früher ein wenig anders Code von dem Plugin bloggt
Habe sie alle ausprobiert und konnte sie auch nicht zum Laufen bringen…. Das heißt, bis ich den Code von Konstantin ausprobiert habe, er funktionierte perfekt und lud super schnell! Vielen Dank, vielen Dank, vielen Dank…. hat viel Zeit und Mühe gespart. Frage: Ist das gültig? Ich habe vorher einfaches JavaScript verwendet, aber es war langsam und umständlich… (unten).
Danke nochmals Konstantin!!!
Das funktioniert großartig, aber der Code stört einige Google Analytics-Funktionen. Zum Beispiel haben wir die gesamte Nachverfolgung ausgehender Links verloren, als wir dies verwendeten.
Verdammt! Konntest du eine Lösung dafür finden?
Ich habe eine Seite mit mehreren Domains, keine der oben genannten Lösungen hat eine Lösung für irgendeine Domain, mit oder ohne www.
Ich muss sagen, dass mir Ihr Code gefällt, aber ich wollte denselben Effekt, aber mit weniger.
Das ist es, was ich bei einem Projekt verwendet habe, das ich aktualisiere.
$(function() {
$(“.targetBlank”).click(function() {
window.open(this.href);
return false;
});
});
Sie könnten das verwenden
$(document).ready(function() {
$(‘.targetBlank’).click(function() {
$(this).target = „_blank“;
window.open(this.href);
return false;
});
});
Dennoch habe ich mich nach dem Testen für die erste entschieden. Alles, was Sie hier tun müssen, ist eine [class=”targetBlank”] zu Ihren Links hinzuzufügen.
Ich möchte mich nur dem Spaß anschließen. Toller Beitrag übrigens. :D
Ich füge einfach das Skript hinzu, um den Target-Wert (_top, _parent, _self, _blank…) direkt zu übernehmen.
$(‘a’).each(function() {
var a = new RegExp(‘/’ + window.location.host + ‘/’);
var targets = this.target;
if(!a.test(this.href)) {
$(this).click(function(event) {
window.open(this.href, targets);
return false;
});
}
});
Sehr schön, aber Sie sollten diesen Beitrag jetzt mit dem neuesten jQuery-Code aktualisieren, um alle externen Links mit rel=„nofollow“ zu versehen.
Wahrscheinlich das Effizienteste
$(this).attr(„target“, „_blank“); Sie können dies verwenden. Es funktioniert gut… Bei Fragen senden Sie mir eine Nachricht an mich…[email protected]
Liebe es – danke für den Schnipsel!
Großartig. Aber ich möchte externe Links in einem neuen Fenster öffnen, außer bei einigen Links. Diese Links sollten mit dem _self-Ziel geöffnet werden. Bitte helfen Sie mir.
Ich liebe diese Lösung, tolle Idee.
Das ist eine ziemlich alberne Aussage, da der Code im Beispiel die „ungültige Markup“ hinzufügt. Ob es sich im Quelldokument befindet oder nicht, wenn es im Browser gerendert wird, ist es in beiden Fällen Teil des Dokuments.
Danke Leute… ihr seid großartig!
Vielen Dank, das spart mir so viel Zeit. Und ich lerne selbst ein paar Dinge!
Das kann tatsächlich vereinfacht werden zu
HTMLAnchorElementhat auch die Eigenschafthostname(die vonhostaufgrund einiger Cross-Browser-Probleme bevorzugt wird – IE8 wird zum Beispiel den Port 80 an den Hostnamen anhängen, auch wenn er nicht in derhrefangegeben ist).Eine Option, um alle externen Links anzusprechen, ohne Klassen oder
rel-Attribute zu benötigenHINWEIS: Dies wurde in IE nicht getestet, da dies im Grunde eine schlechte Idee ist und es mir egal ist, ob die Links in älteren Browsern wie Links funktionieren.
Dieser Beitrag war eine große Hilfe, danke. Ich kann jetzt ganz einfach Blog-Badges zu meiner Seite hinzufügen und weiß, dass sie sich in einem neuen Fenster öffnen.
Wenn ich den Badge-Code ändern kann, um ihn in einem neuen Link zu öffnen, dann kann das jeder!
Ich habe Mikes Code ausprobiert, aber er funktioniert nicht, noch jemand?
Hallo, Jacob Magnusson, Ihr Code funktioniert gut, aber er funktioniert nur bei rel=”external”, aber nicht bei etwas wie rel=”external nofollow”, gibt es dafür Lösungen? Entschuldigung, ich bin schlecht in JavaScript, brauche nur Hilfe. Danke.
Hallo zusammen,
Ich kann nicht herausfinden, wie ich das hier in einem neuen Fenster öffnen kann, wenn es fallen gelassen wird. Es ist eine Drag-and-Drop-Funktion. Es funktioniert, aber es öffnet kein neues Fenster.
Kann mir jemand hier helfen?
Hallo zusammen, ich versuche dies auf einer SharePoint 2007 Webpart-Seite zu tun, wo ich das Seitenanzeige-Webpart verwende, um eine Seite mit Links einzufügen, die wir oft verwenden. Jetzt möchte ich etwas Code in eine CEWP einfügen, die dazu führt, dass beim Anklicken eines dieser Links ein neuer Seitenaufruf erfolgt. Habe Ihren Code oben ausprobiert, aber ohne Erfolg. Irgendwelche Gedanken?
Wenn das Iframe externe Inhalte hat, wie lese ich <a href Link blockiert durch Sicherheitsfehler
Was ist, wenn ich externe Website-Links (weiterführende Seiten) im selben Div öffnen möchte, wo die Seite angezeigt wird, ohne zur nächsten Seite zu wechseln oder die URL zu ändern. Ich möchte sie nur im selben Div öffnen, wo die externe Seite bereits angezeigt wird.
Wenn Sie, wie in unserem Fall, dynamisch per Ajax geladene Links haben, könnten Sie target=„_blank“ zu jedem Link hinzufügen, der nach dem Laden des Dokuments hinzugefügt wird.
Oder Sie könnten dieses feine, gut zubereitete Stück Code zu Ihrer document.ready-Funktion hinzufügen.
Immer wenn Sie irgendwo auf der Seite mit der Maus klicken und das Ziel des Mausklicks ein a-Element ohne Mailto- oder JavaScript im href-Attribut ist, überprüfen Sie, ob es sich um einen Link zu einer externen Seite handelt. Wenn ja, setzen Sie sein Attribut target auf „_blank“. Da es an das Dokument und nicht an das a-Element selbst gebunden ist, spielt es keine Rolle, ob der Link nach der document.ready-Funktion geladen wird.
Alfred, ich habe eine Situation.
Ich bekomme das Ergebnis in meinem „showresult“-Div. Was soll ich tun, wenn ich andere Seiten im selben Div „showresult“ anzeigen möchte, wenn ich auf die Links klicke? Ich möchte nicht, dass die Links in einem neuen Fenster oder im selben Fenster geöffnet werden, ich möchte, dass sie im selben Div „showresult“ geöffnet werden.
Wie öffne ich ein Chrome-Fenster mit einem JavaScript-Programm?
Wenn eine Webseite in Firefox geöffnet ist und Sie möchten, dass Chrome durch Klicken auf die in Firefox geöffnete Seite geöffnet wird
Danke für diesen Tipp, Chris. Der zweite jQuery-Schnipsel, mit einer Modifikation an der spezifischen benötigten URL, hat es einfach gemacht, Umleitungen spezifischer URLs in einem neuen Tab zu öffnen – auf einer WordPress-Site, auf der ich benutzerdefiniertes JavaScript hinzufügen konnte, aber das Redirection-Plugin nicht einfach ändern konnte (noch relevante Optionen). So fügt jQuery das „_blank“ zur URL hinzu, bevor es das Plugin erreicht, und dann erledigt das Redirection-Plugin seine Arbeit. Prost!
Mit Vanilla JS
Hier ist ein einfacherer jQuery-Code
Alle diese Code-Schnipsel sind großartig. Ich habe eine Situation, in der ich mehrere Hostnamen identifizieren muss, die interne Links sind und nicht in einem neuen Fenster geöffnet werden sollen. Ich bin mir nicht sicher, wie ich die Codebeispiele für dieses Szenario ändern kann. Jegliche Vorschläge wären sehr willkommen.
Es gibt ein großes Problem mit diesem Schnipsel, da er Anker-Tags ohne href nicht berücksichtigt. Was eine Designentscheidung ist, d. h. a-Tags für Buttons zu verwenden, die nur etwas mit JavaScript tun.
Der richtige Code sollte also so aussehen
Gibt es eine Möglichkeit, dies für
<a href="javascript:void(0);"-Links zu verhindern, die von Plugins hinzugefügt werden (ich glaube, um Elemente klickbar zu machen) und die nicht auf einer neuen Seite geöffnet werden sollten? Ich bin nicht gut genug in JavaScript, um einen Ausschluss für diese Art von Link hinzuzufügen, aber wenn jemand helfen könnte, wäre das sehr dankbar!Ich habe gelernt, wie ich Ihr Skript so anwenden kann, dass es keine Probleme mit „javascript:void(0);“-Links auf meiner Seite verursacht, aber es deaktiviert die Verfolgung externer Links in Google Analytics (Google Tag Manager-Implementierung mit einem „Click – Just Links“-Trigger, der RegEx verwendet, um auszulösen, wenn die URL nicht den Domainnamen enthält).
Gibt es eine Möglichkeit, das Skript (oder meine Universal Analytics GA / GTM-Einrichtung) zu ändern, damit externe Linkklicks weiterhin in Google Analytics (UA, nicht GA4) verfolgbar sind?