Beispiele: externe Links

Beispiel - Öffnen externer Links in neuem Tab/Fenster mit XHTML 1.0 strict

So sieht's aus:

Dies ist die Beispielseite 1.
Sie wurde ohne Angabe aufgerufen, ob Links zu externen Seiten in einem neuen Tab/Fenster zu öffnen sind oder nicht. Daher werden standardmäßig Links zu externen Seiten in einem neuem Tab/Fenster geöffnet.

Dieses Verhalten können Sie über diese Checkbox ändern, ohne diese Seite neu laden zu müssen:

Testen Sie das Verhalten externer Links an diesem Beispiel zu google.com:
Externer Link

Beim Aufruf interner Seiten wird die Eigenschaft der Checkbox oben übernommen. Testen Sie es mit diesem Link:
Interner Link

PHP-Code dieser Seite:

<?php
echo '<?xml version="1.0" encoding="ISO-8859-1"?>'; echo "\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
  <meta http-equiv="Content-Script-Type" content="text/javascript"/>
  <title>Beispiele: externe Links</title>
  
  <script src="../../include/linkopener.js" type="text/javascript"></script>
  
<style type="text/css">
body 
{
  font-family: Arial, Sans-Serif;
  background-color:#FFFFFF;
}

a 
{
  text-decoration: underline;
  color: #0000FF;
  background: transparent;
}

a:hover 
{
  text-decoration: underline;
  color: #FF0000;
}

.aExtLink
{
  text-decoration: underline;
  color: #0000FF;
  background: url('../images/extlink.png') no-repeat 100% 0;
  padding: 0 20px 0 0;
}

.aExtLink:hover 
{
  color: #FF0000;
  background: url('../images/extlink.png') no-repeat 100% -100px;
}

#divExampleBox
{
  background-color:#F7F8F3;
  border: 1px solid #FF0000;
  padding: 5px;
  font-size: 11px;  
}

#divLinkSettings
{
  border: 1px solid #00;
  background-color:#032E5A;
  color: #D8D2B4;
}

#pExtLinkSelector
{
  padding: 0px 20px 0px 0px;
  background: url('../images/extlink.png') no-repeat 100% -200px;
}
</style>
</head>
<?php
  if (isset($_GET['ext']))
  {
    echo '<body onload="linkopener(false)">';
  } 
  else
  {
    echo '<body onload="linkopener(true)">';
  }
?>

  <h3>Beispiel - Öffnen externer Links in neuem Tab/Fenster mit XHTML</h3>
  <div id="divExampleBox">
    <h3>So sieht's aus:</h3>
    <br/>
    Dies ist die Beispielseite 1.
    <br/>
    <?php 
    if (isset($_GET['ext']))
    {
      echo ' Sie wurde aufgerufen mit der Angabe, <b>Links zu externen Seiten in diesem Tab/Fenster zu öffnen</b>, statt in einem neuen Tab/Fenster.'; echo "\n";
    }    
    else
    {
      echo ' Sie wurde ohne Angabe aufgerufen, ob Links zu externen Seiten in einem neuen Tab/Fenster zu öffnen sind oder nicht. 
      Daher werden standardmäßig <b>Links zu externen Seiten in einem neuem Tab/Fenster geöffnet</b>.'; echo "\n";
    }    
    ?>
    <br/>
    <br/>
    Dieses Verhalten können Sie über diese Checkbox ändern, ohne diese Seite neu laden zu müssen:
    <div id="divLinkSettings">
      <script type="text/javascript">
/* <![CDATA[ */
        document.writeln("<form action=\"\" method=\"get\">");
        document.write("<p>");
        document.write("<span id=\"pExtLinkSelector\">");
        document.write("<input name=\"chkbox_target_extern\" ");
        document.write("type=\"checkbox\" onclick=\"linkopener(this.checked)\" ");
        document.write("alt=\"Externe Links in neuem Tab\/Fenster öffnen.\" ");
        <?php
        if (isset($_GET['ext']))
        {
          echo '        document.write("\/>");'; echo "\n";
        }
        else
        {
          echo '        document.write("checked=\"checked\"\/>");'; echo "\n";
        }
        ?>
        document.write("Externe Links ");
        document.write("<\/span>");
        document.writeln(" in neuem Tab\/Fenster öffnen.");
        document.write("<\/p>");
        document.writeln("<\/form>");
/* ]]> */
      </script>
    </div>
    Testen Sie das Verhalten externer Links an diesem Beispiel zu google.com:
    <br/>
    <a class="aExtLink" href="http://www.google.com">Externer Link</a> 
    <br/>
    <br/>
    Beim Aufruf interner Seiten wird die Eigenschaft der Checkbox oben übernommen. Testen Sie es mit diesem Link:
    <br/>
    <a href="./externelinks2.php?language=de">Interner Link</a> 
  </div>
  <hr/>
  <p><a href="../snippets/web/index?language=de">zurück zum Codeschnipsel</a></p>
</body>
</html>

JavaScript-Code dieser Seite (linkopener.js):

/* <![CDATA[ */
  function linkopener(a)
  {
    var b=a?"_blank":"_self";
    var c=document.links;
    for(var i=0;i<c.length;i++)
    {
      if(c[i].className == "aExtLink")
      {
        // EXTERNER LINK
        
        c[i].target=b;
      }
      else
      {
        // INTERNER LINK
        
        // Alle Vorkommen von &ext=0 in der URL entfernen
        var Pos = 0;
        while (Pos >= 0)
        {
            Pos = c[i].href.indexOf("&ext=0", 0);
            if (Pos >= 0) c[i].href = c[i].href.substring(0, Pos) + c[i].href.substring(Pos + 6);
        }
        // Alle Vorkommen von ?ext=0 in der URL entfernen
        Pos = 0;
        while (Pos >= 0)
        {
            Pos = c[i].href.indexOf("?ext=0", 0);
            if (Pos >= 0) c[i].href = c[i].href.substring(0, Pos) + c[i].href.substring(Pos + 6);
        }
        
        // Externe Links sollen im selben Tab/Fenster geöffnet werden
        if (b != "_blank")
        {
          var replaceText = "ext=0";
          Pos = c[i].href.indexOf("?", 0);
          if (Pos >= 0)
          {
            replaceText = "&ext=0";
          }
          else
          {
            replaceText = "?ext=0"
          }
          
          // Position des #-Zeichen bestimmen, falls vorhanden
          Pos = c[i].href.indexOf("#", 0);
          if (Pos >= 0)
          {
            // Ein Vorkommen von # gefunden. replaceText vor dieses Zeichen einfügen.
            c[i].href = c[i].href.substring(0, Pos) + replaceText + c[i].href.substring(Pos);
          }
          else
          {
            // Keine Vorkommen von # gefunden. replaceText einfach an URL anhängen.
            c[i].href=c[i].href.concat(replaceText);
          }
        }
      }
    }
  }
/* ]]> */

zurück zum How-To