Zur Navigation

Anchor in URL benennen

1 C)-(iLL@

Hi allerseits,

ich habe zwei Fragen zu Anchors.

mir ist bekannt, dass die URLs von Google nur bis zum '?' geparst werden, sodass der URL-Name etwas für das PR tut.

Was ist aber mit Anchors? Ist es von Belang, ob ich einem <a> die id 'a1' gebe und die Seite dann mit 
http://domain/thema.htm#a1
verlinke oder einen aussagekräftigeren Titel nehme wie 
http://domain/thema.htm#absatz
? Bringt das was, außer einer logischeren aber längeren URL und längerem Source-Code?

Der Link, der auf 
http://domain/thema.htm#a1
linkt hat sowieso einen Titel und einen Text, á la 
<a href="http://domain/seite.htm#a1" title="Thema - Absatz">Thema: Absatz</a>
. Ist das Format 
<a href="http://domain/seite.htm#absatz" title="Thema - Absatz">Thema: Absatz</a>
besser oder wird der Anchor sowieso ignoriert?

Die zweite Frage ist, ob es *irgendwie* möglich ist, mehrere Anchors zugleich in verschachtelten Divs zu referenzieren. Also quasi die Scrollposition von zwei oder mehreren Divs beim Laden der Seite einzustellen. Kennt dazu jemand eine Möglichkeit?

Dankbar für jede Hilfe,
Rudy

19.08.2005 13:18

2 Jörg Kruse

Google ignoriert Anchors in Links. Bei folgender Suchabfrage findet Google den Anchor "p1" beispielsweise nur im Text oder in einem XML File, obwohl viele Seiten in diesem Forum mit dem Anchor verlinkt sind:

"joergkrusesweb p1"

Einen indirekten Effekt auf das Ranking hätte ein Linktext, der aus der URL erzeugt wird - bei freiwilligen Linksetzungen in Foren etc. kommt sowas bisweilen ja vor :)

zu deiner zweiten Frage:

wenn man den inneren Anchor anspringt, bewegt sich dann nicht auch der äußere Scrollbalken, wenn notwendig?

19.08.2005 14:17

3 C)-(iLL@

Danke, also hat sich was mit langen Anchor-Namen, serverseitig kann man die sowieso nicht auslesen.

Bei den DIVs habe ich mich zu ungenau ausgedrückt, ich meinte nicht zwei verschachtelte Divs, sondern mehrere Divs derselben Tiefe bzw. zwei verschiedener Tiefe, die nicht denselben Parent haben. Ist das möglich, die zugleich auf die gewünschte Scrollposition zu setzen?

19.08.2005 15:32

4 Jörg Kruse

Hm, gleichzeitig wüsste ich keine Möglichkeit. Wie ist das Resultat, wenn die Browser die Anker hintereinander anspringen? vielleicht könnte die erste Sprungmarke wie gewohnt im Anker übergeben werden, die zweite in einem Parameter, also z.B. so:

<a href="http://domain/seite.htm#a1?b=b3" title="Thema - Absatz">Thema: Absatz</a>

anschließend wird gleich weitergeleitet auf den Anker, der in der Variable b steht, sofern diese nicht leer ist

19.08.2005 20:12

5 C)-(iLL@

Ich sehe schon, im Gegensatz zu mir hast Du genau gecheckt, wie die Browser die Anchors verarbeiten ;)
Ich wusste nicht, dass die den vorherigen Scrollstatus von entfernten Divs cachen - beim Wechsel auf einen neuen Anchor in einem anderen Div - ich dachte die laden immer neu und setzen den Scrollstatus der Divs zurück, die den Anker nicht enthalten.
Das sich diese Annahme nicht bestätigt ist ja klasse. Mit einer einfachen Fallback-Funktion kann man da theoretisch alle Divs auf den gewünschten Anker setzen.
Damit lässt sich viel machen.
Danke... mal wieder! :)

19.08.2005 21:38

6 C)-(iLL@

Jetzt habe ich es ausgiebig getestet und komme zum Schluss: Das geht mit PHP nicht.
Warum? Der Browser lädt die Seite nicht neu, wenn sich an der Adresse nur der Anchor ändert, sondern sucht in dem Fall nach dem Anchor auf der aktuellen Seite und setzt die Scrollposition des Containers entsprechend. Das Problem ist, ohne Reload wird kein PHP ausgeführt, und eine Fallback-Funktion ist unmöglich. Wenn man den Refresh mit Header('Location...') erzwingt, dann werden die Scrollpositionen aller Divs zurückgesetzt und im Fallback nur der letzte per GET-Parameter übergebene Anchor gesetzt.

Soviel zur Serverseite. Mit JS und window.location.href müsste es aber gehen, dies muss ich jetzt testen.

Wem es interessiert, hier die Testdatei mit der ich das Verhalten untersucht habe:

<?php
  session_start();
  if (isset($_GET['anchor']) && $_GET['anchor'] !== '') {
    if (!session_is_registered('anchorsleft'))  {
	  $anchorsleft = $_GET['anchor'];
	  session_register('anchorsleft');
    } 
	if (strlen($anchorsleft) > 1){
	  $anchor_arr = explode('|', $anchorsleft); //Format ?anchor=t0|c1|b2 => referenziert t0, c1 und b2
	  $set_anchor = array_shift($anchor_arr);
	  $anchorsleft = implode('|', $anchor_arr);
	  $newlocation = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'].'#'.$set_anchor;
	  //print('<a href="'.$newlocation.'">'.$newlocation.'</a>');
	  header("Location: $newlocation");
    } else {
	   session_unregister('anchorsleft');
	 }
  }
?>
<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Anchor-Test</title>
<style type="text/css">
html, body {
  padding:0; 
  margin:0;
}
div#all {
  margin: 0 auto 0 auto;
  width:250px;
  background:#FFFFE0;
  border-left:1px dotted orange;
  border-right:1px dotted orange;
}
div#all > div {
   height:30px;
   overflow:auto;
   border-bottom: 1px dotted orange;
   
}
div#all > div:first-child {
   border-top:1px dotted orange;
   margin-top:10px;
}
div#all > div > a {
   display:block;
   font: bold 25px Arial, Helvetica, sans-serif;
   letter-spacing:5px;
   text-transform:uppercase;
   text-decoration: none;
   margin-left:5px;
}
div#all > h1 {
   margin:0;
   padding:0;
   font: bold 20px Arial, Helvetica, sans-serif;
}
div#top {
   background: #FFEFDF;
}
div#center {
   background: #EFFFDF;
}
div#bottom {
  background: #DFFFEF 
}
div#top > a {
    color:#B25A00;
}
div#center > a {
   color: #53B000;
}
div#bottom > a {
   
}
</style>
</head>
<body>
  <div id="all">
    <div id="top">
	  <a href="#c1" id="t0">T-Link 0</a>
	  <a href="#c2" id="t1">T-Link 1</a>
	  <a href="#c3" id="t2">T-Link 2</a>
	  <a href="#c4" id="t3">T-Link 3</a>
	  <a href="#c5" id="t4">T-Link 4</a>
	  <a href="#c6" id="t5">T-Link 5</a>
	  <a href="#c7" id="t6">T-Link 6</a>
	  <a href="#c8" id="t7">T-Link 7</a>
	  <a href="#c9" id="t8">T-Link 8</a>
	  <a href="#c0" id="t9">T-Link 9</a>
	</div>
	<div id="center">
	  <a href="#b1" id="c0">C-Link 0</a>
	  <a href="#b2" id="c1">C-Link 1</a>
	  <a href="#b3" id="c2">C-Link 2</a>
	  <a href="#b4" id="c3">C-Link 3</a>
	  <a href="#b5" id="c4">C-Link 4</a>
	  <a href="#b6" id="c5">C-Link 5</a>
	  <a href="#b7" id="c6">C-Link 6</a>
	  <a href="#b8" id="c7">C-Link 7</a>
	  <a href="#b9" id="c8">C-Link 8</a>
	  <a href="#b0" id="c9">C-Link 9</a>
	</div>
	<div id="bottom">
	  <a href="#t1" id="b0">B-Link 0</a>
	  <a href="#t2" id="b1">B-Link 1</a>
	  <a href="#t3" id="b2">B-Link 2</a>
	  <a href="#t4" id="b3">B-Link 3</a>
	  <a href="#t5" id="b4">B-Link 4</a>
	  <a href="#t6" id="b5">B-Link 5</a>
	  <a href="#t7" id="b6">B-Link 6</a>
	  <a href="#t8" id="b7">B-Link 7</a>
	  <a href="#t9" id="b8">B-Link 8</a>
	  <a href="#t0" id="b9">B-Link 9</a>
	</div>
  </div>
</body>
</html>

Damit es klar wird, einfach die Zeile mit header auskommentieren und stattdessen den bisher auskommentierten Link verwenden, danach ein Refresh machen.

Das Ziel der nun folgenden JS-Lösung ist klar: Aus einer PHP-Variable mehrere Anchors zu setzen nach nur einem Load, das PHP wird die Parameter für die Funktion schreiben müssen. Benutzer ohne aktiviertem Javascript erhalten diese Funktionalität dann leider nicht, eine serverseitige Lösung wäre ideal gewesen.

Wenn ich ein funktionierendes Script habe, poste ich es hier, falls das noch wer braucht.

20.08.2005 15:20

7 C)-(iLL@

Gut, mit JS hats geklappt, sogar sehr fix. 

<script type="text/javascript">
  function adjustAnchors(anchstr) {
	   while(anchstr.length > 0) {
	    if (anchstr.indexOf('|') > -1) {
	      set_anchor = anchstr.substr(0, anchstr.indexOf('|'));
		      anchstr = anchstr.substr(anchstr.indexOf('|')+1, anchstr.length-(anchstr.indexOf('|')+1));
	    } else {
	      set_anchor = anchstr;
		     anchstr = '';
	    }
	    window.location.href = '#'+set_anchor;
	   }
    window.location.href = '';
  }
</script>
Wenn dieses Skript eingebunden ist, reicht es, am Ende vor </body> mit PHP den JS-Block hinzuschreiben, z.B.

  <script type="text/javascript">adjustAnchors('t5|c6|b7')</script>

Das PHP kann so auch nebst GET noch POST / SESSION / COOKIE-Werte dafür verwenden bzw. speichern, was natürlich wieder neue Möglichkeiten eröffnet.
Der PHP-Code vom obigen Beispiel ist natürlich für die Katz und sollte von der Testdatei rausgenommen werden, um dieses Beispiel auszuprobieren.

So long,
Rudy

20.08.2005 16:16

Zum Schreiben einloggen

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]