Schlagwort: href

Externe Links in neuem Tab öffnen

Für externe Links hat man früher gerne das Hyperlink-Attribut target auf _blank gestellt, um zu erreichen, dass diese Links in einem neuen Fenster oder Tab geöffnet werden. Mit dem „XHTML 1.0 Strict“-Standard wurde das Attribut target jedoch begraben, weshalb der W3C Markup Validation Service nur ein there is no attribute "target" anzeigt, sofern dieses Attribut verwendet wird. Begründet wurde dieser Entschluss damit, dass man dem Webseiten-Besucher selber die Entscheidung überlassen möchte, ob er den Link in einem neuen Fenster öffnen möchte oder nicht.

Möchte man trotzdem externe Links in einem neuen Tab öffnen lassen und dabei die W3C Validierung bestehen, so hilft ein Umweg über JavaScript, welcher alle externen Links findet und mit dem Wert target="_blank" auszeichnet:

var links = document.getElementsByTagName('a');
if(links.length > 0){
  for(var i = 0; (link = links[i]); i++){
    if(link.href.indexOf(document.domain) == -1){
      link.setAttribute('target', '_blank');
    }
  }
}

Möchte man die Links von dynamisch generierten Inhalten ebenfalls auf target="_blank" setzen, so hilft folgender PHP-Trick:

$text = str_replace('<a', '<a target="_blank"', $text);

Im aktuellen HTML5-Entwurf wurde das target-Attribut übrigens wieder aufgenommen.

Webseiten-URL ohne Dateinamen mit JavaScript erhalten

Über window.location.href erhält man mit JavaScript die Adresse der aufgerufenen Webseite (z.B. http://localhost:8080/webpage/index.html). Möchte man aber nur den Pfad (z.B. http://localhost:8080/webpage/) haben, kann man folgenden Code einsetzen:

1
2
3

// Given: http://localhost:8080/webpage/index.html
// Output: http://localhost:8080/webpage/
var path = window.location.href.match(/^(http.+\/)[^\/]+$/)[1];

Die vorgestellte Methode hat noch einen Schwachpunkt. Führt man den Code nämlich über „http://localhost:8080/webpage/“ und nicht über „http://localhost:8080/webpage/index.html“ aus, so funktioniert der verwendete reguläre Ausdruck nicht wie gewünscht. Das lässt sich aber mit dem bedingten (ternären) Operator beheben:

1
2
3

// Given: http://localhost:8080/webpage/ OR http://localhost:8080/webpage/index.html
// Output: http://localhost:8080/webpage/
var path = ((window.location.href.match(/^(http.+\/)[^\/]+$/) != null) ? window.location.href.match(/^(http.+\/)[^\/]+$/)[1] : window.location);

Click a link with JavaScript

Here is some code that shows you how you can click a link with JavaScript (without using the mouse):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="" />
    <title>Click a link with JavaScript</title>
    <style type="text/css">
      * { margin: 0; padding: 0; border: 0; }
    </style>
  </head>
  <body>
    <a id="myLink" href="https://www.bennyn.de/">Hyperlink</a>
    <script type="text/javascript">
      function clickLink(id){
        var theEvent = document.createEvent("MouseEvent");
        theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        var element = document.getElementById(id);
        element.dispatchEvent(theEvent);
 
        while (element){
          if (element.tagName == "A" && element.href != ""){
            if (element.target == "_blank") { window.open(element.href, element.target); }
            else { document.location = element.href; }
            element = null;
          }
          else{
            element = element.parentElement;
          }
        }
      }
 
      clickLink('myLink');
    </script>
  </body>
</html>