2016-12-07 3 views
0

Ich habe Anker-Tags mit href nur ein Fragment enthält. Ich habe einen Click-Handler zugewiesen. Wenn ich auf den Link klickte, nachdem der Handler fertig war, lädt die Seite die Seite, die eine Stufe höher ist.Warum zeigt Anker href vollständigen Pfad für Fragment an?

Hier sind die Fakten:

  1. Die Seite bei http://domain.com/app/path_component wird
  2. Die Seite definiert <base href="http://domain.com/app/">
  3. Seite enthält: <a href="#fragment"> ... </a>
  4. jQuery setzt einen Click-Handler: $('a').on('click', handler)
  5. .htaccess leitet Server Umgang mit der PHP-Anwendung auf dem Server ... /app

ich zurückkehrte, nicht falsch, noch ruft e.stopPropagation() oder e.preventDefault(), so verstehe ich, dass der Browser seine Standard etwas tun würde und die href zu behandeln. Was ich nicht verstehe ist, warum es eine andere Seite geladen hat?

durch meine Handler In Tracing, sah ich, dass this.href ist "http://domain.com/app/#fragment". Das würde erklären, warum die Eltern das Laden der Seite ist, aber ich verstehe nicht, warum es diese Seite war und nicht http://domain.com/app/path_component#fragment „?

Die einzige Art, wie ich die ursprüngliche href sehen konnte, war direkt das href Attribut zu überprüfen. Ich wollte der Seite zu laden lassen, wenn es notwendig sein sollte, aber es verhindern, wenn es nur ein Fragment ist, so schrieb ich Rückkehr der Handler als:

return $(this).attr('href')[0] != '#'; 

Warum wurde dies notwendig ich dachte, die Standardeinstellung für ein Fragment der Handhabung ist nicht zurück an den Server zu gehen.

Antwort

2

ein Browser Short behandelt, indem sie mit einem Link zugeordnet, in der ba verketten se-Tag, also wenn Sie <base href="http://something.com/"> alle Shortlinks und relative Quellen (d. h. <img src="...">) wird relativ zum base behandelt. Das <base> ist hauptsächlich dazu gedacht, Ihre Webseiten einfach auf eine andere Seite portierbar zu machen.

, um eine Lösung benötigen Sie Ankerpfad relativ zur Basis zuzuweisen:

<a href="path_component#fragment"> 

Ein anderer Weg ist js Basis Anker:

<a href="javascript:;" onclick="document.location.hash='fragment';">fragment</a> 

Eine der Lösungen ist die Basisknoten mit Hilfe von Javascript zu erzeugen am Anfang der Seite und es <head> als Kind anhängt:

<script> 
    var currPage = window.location.href; 

    if (document.getElementsByTagName("base").length === 0) { 
     var base = document.createElement("base"); 
     base.setAttribute("href", currPage); 
     document.getElementsByTagName('head')[0].appendChild(base); 
    } 
    else { 
    document.getElementsByTagName("base")[0].setAttribute("href", currPage); 
    } 

</script> 

Es sollte funktionieren, aber wie ich oben erwähnt, wenn Sie relativen Pfad für Bildquellen verwenden, sollten Sie ihre Verbindungen mit ../ beginnen (d <img src="../images/image.gif">), um den absoluten Pfad basierend auf der übergeordneten Seite zu erhalten.

+0

Ich habe zum Zweck Sie beschreiben, aber ich habe es nicht Stand-alone-Fragmente beeinflussen würde, da sie in der Regel nicht einmal einen Anruf zurück an den Server auslösen. Ich muss mein Verständnis davon neu definieren. – wrlee