Funktion nach Sprung zu Anker ausführen?

[Andreas Diner]

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.
Ich hoffe meine Beschreibung war hinrechend genau. Sollte es noch fragen geben, gebt mir einfach bescheide.
Ich hoffe es weiß Jemand eine Lösung.

[ChrisB]

Hi,

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

Dann spring halt selber, bevor du die eigentliche Funktionalitaet ausfuehrst - location.hash ist auch aenderbar.

MfG ChrisB

[Andreas Diner]

Dann spring halt selber, bevor du die eigentliche Funktionalitaet ausfuehrst - location.hash ist auch aenderbar.

Würde ich ganz gerne, allerdings will ich in das eigentliche Anker-Prinzip nicht eingreifen (die Seite soll auch ohne Javascript  funktionsfähig sein). Ich will aber ein paar Kleinigkeiten am Dokument verändern, je nach dem zu welchem Anker gesprungen wurde. Und um dass zu wissen muss ich location.hash auslesen. Das hat sich aber erst geändert  nachdem der Sprung ausgeführt wurde.
Wenn Jemand einen anderen Ansatz weis dann bin ich dafür gerne offen.

[globe]

n'abend,

Würde ich ganz gerne, allerdings will ich in das eigentliche Anker-Prinzip nicht eingreifen (die Seite soll auch ohne Javascript  funktionsfähig sein). Ich will aber ein paar Kleinigkeiten am Dokument verändern, je nach dem zu welchem Anker gesprungen wurde. Und um dass zu wissen muss ich location.hash auslesen. Das hat sich aber erst geändert  nachdem der Sprung ausgeführt wurde.

du weisst doch aber auf welchen Link geklickt wurde. Daraus kannst du doch den angesprungenen Anker ermitteln.

function ankerClick( link )  
{  
  alert( link.href );  
}

<a href="#planet-hell" onclick="ankerClick(this);">Planet Hell</a>

Die SELFHTML'sche Dokumentation zu Events ist zwar (sehr) dürftig, solltest du aber dennoch mal anschauen.

weiterhin schönen abend...

[ChrisB]

Hi,

Dann spring halt selber, bevor du die eigentliche Funktionalitaet ausfuehrst - location.hash ist auch aenderbar.

Würde ich ganz gerne, allerdings will ich in das eigentliche Anker-Prinzip nicht eingreifen (die Seite soll auch ohne Javascript  funktionsfähig sein).

Kann sie doch gerne bleiben: Ohne JS wird der Anker ganz normal angesprungen - mit JS greift ein onClick-Handler ein: Springt zuerst den Anker an, fuehrt dann deine Funktion aus, und unterbindet dann die normale Linkaktion (Anspringen des Ankers) durch return false;

MfG ChrisB

[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...

[Felix Riesterer]

Lieber Andreas,

ich kann Dir vielleicht helfen. Ich hatte ein ganz anderes Problem zu lösen und musste daher diese zum-Anker-springen-Funktionalität mittels Javascript nachbilden. Das folgende Script ersetzt Verweisziele der Art "#Anker" in "{gegenwärtige URL}?a=Anker", berücksichtigt also keine Verweisziele, bei denen vor dem Ankernamen noch eine Datei angegeben ist (z.B. seite.html#Anker). Dort müsstest Du vielleicht noch Anpassungen vornehmen.

Das Script wird einfach in jede HTML-Datei eingebunden, in der diese Funktionalität erwünscht ist.

----file: "to_anchor.js"----

(function () {  
    // Aufruf mit Anker? Dann nach dem Laden zum entsprechenden Element vorscrollen!  
    if (window.location.search.match(/\?a=/i)) {  
        var a = window.location.search.replace(/^.*a=([^&=]+).*$/i, "$1"),  
            elm = document.getElementById(a),  
            elms = document.getElementsByName(a);  
  
        if (!elm && elms && elms.length > 0) {  
            elm = elms[0];  
        }  
  
        if (elm) {  
            window.scrollBy(0, elm.offsetTop);  
            /*  
               Hier könnte weiterer Code folgen...  
            */  
        }  
    }  
  
    // Alle Verweise mit Anker entsprechend korrigieren  
    var i, a, atts, url,  
        baseURL = window.location.pathname;  
  
    for (i = 0; i < document.links.length; i++) {  
        url = '';  
  
        // originalen href-Wert holen  
        if (document.links[i].href.match(/#.+/)) {  
            atts = document.links[i].attributes;  
            for (a = 0; a < atts.length; a++) {  
                if (atts[a].nodeName.match(/^href$/i)) {  
                    url = atts[a].nodeValue;  
                }  
            }  
  
            if (url != '') {  
                if (url.match(/^#/)) {  
                    // URL verweist auf dieselbe Seite: Pfad ergänzen!  
                    url = window.location.pathname + url;  
                }  
  
                document.links[i].href = url.replace(/^(.*)#.+$/i, "$1")  
                    + "?a="  
                    + url.replace(/^.*#([^#]+)$/i, "$1");  
            }  
        }  
  
    }  
} ()  
)

Liebe Grüße aus Ellwangen,

Felix Riesterer.