Funktion nach Sprung zu Anker ausführen?

[globe]

n'abend,

Habe schon überall im Internet gesucht und leider nicht's gefunden. Ich hoffe hier kann mir Jemand weiter helfen. Ich mochte eine Javascript-Funktion jedesmal dann ausführen lassen, nachdem der Browser, durch das Klicken auf einem Link, zu einem Anker innerhalb des Dokumentes gesprungen ist. Per onclick im link ist das leider nicht möglich da die Funktion dann noch vor dem Sprung ausgeführt wurde und ein onload im Body wird leider nicht nur beim ersten laden des Dokumentes ausgeführt.

Du hast 2 Möglichkeiten, onclick mit zeitversetzter Ausführung, oder alle paar Millisekunden schauen, ob sich der angesprungene Anker geändert hat. Das erste Verfahren bedeutet ein wenig mehr Aufwand für dich, die letztere bedeutet mehr Aufwand für den Browser. Ich würde zum ersten Verfahren tendieren, da das zweite unnötige Leistung beim Benutzer verschwendet.

1 - Zeitversetzte Ausführung im onclick Event-Handler:

Wie du bereits bemerkt hast, wird der onclick-Handler ausgeführt, *bevor* der Browser auf eine andere Seite oder einen anderen Anker springt. Das hat auch durchaus seinen Sinn. Du möchtest - aus welchen, leider nicht erläuterten, Gründen auch immer - aber eine Funktion *nach* dem Sprung auf den Anker ausführen. Dazu kannst du im onclick-Handler mittels window.setTimeout() eine Funktion zur zeitversetzten Ausführung registrieren. Beispielsweise so:

/* zeitversetzte Funktion von onclick */  
function delayedOnclick()  
{  
  alert( "da bin ich" );  
}  
  
/* diese Funktion als onclick handler registrieren */  
function handleOnclickEvent()  
{  
  // in Javascript ist eine Funktion ein Objekt, das wie eine normale Variable behandelt werden kann.  
  // 50 Millisekunden sollten reichen, um den Browser zum Anker springen zu lassen  
  window.setTimeout( delayedOnclick, 50 );  
}

Für diese Geschichte musst du noch nicht mal dein HTML anfassen, denn das registrieren von (möglicherweise [sehr] vielen) Event-Handlern machen wir besser mal per Javascript, gleich nachdem die Seite geladen wurde:

window.onload = function(){  
  // finde alle links  
  var links = document.getElementsByTagName( 'a' );  
  for( var i=0; i < links.length; i++ )  
  {  
    // behandle nur anker-links  
    if( links[i].src.substr(0,1) != '#' )  
      continue;  
  
    // setze / überschreibe das onclick attribut  
    // hinweis: an dieser stelle könnte man bereits existierende event-handler kapseln, damit diese ebenfalls ausgeführt werden  
    links[i].onclick = handleOnclickEvent;  
  }  
};

2 - ständige Überwachung von window.location.hash mittels window.setInterval()

Wir können auch alle 100 Millisekunden nachschauen, ob sich der angesprungene Anker geändert hat:

function ankerUeberwachung()  
{  
  // schaffe Platz für's Merken des aktiven Ankers  
  if( !this.zuletztBekannterAnker )  
  {  
    this.zuletztBekannterAnker = '';  
    return;  
  }  
  
  if( this.zuletztBekannterAnker != window.location.hash )  
  {  
    alert( 'es wurde ein anderer anker angesprungen' );  
  
    // neuen Anker merken  
    this.zuletztBekannterAnker = window.location.hash;  
  }  
}  
  
window.onload = function(){  
  window.setInterval( ankerUeberwachung, 100 );  
};

sämtliche Beispiele sind ungetestet runtergeschrieben und sollen lediglich die Verfahrensweisen mittels ein bisschen Code darstellen.

weiterhin schönen abend...