Verknüpfen mit einem bestimmten Teil einer Webseite


90

Wie erstelle ich einen Link zu einem Teil einer langen Webseite auf einer anderen Website, die ich nicht kontrolliere?

Ich dachte, Sie könnten eine Variante der #partofpage am Ende meines Links verwenden. Irgendwelche Vorschläge?



Um diesen Teil der Antwort zu verlinken, verwenden Sie den folgenden Link: stackoverflow.com/questions/15481911/…
Ruturaj Bisure

Um diesen Teil der Seite zu verlinken, verwenden Sie den folgenden Link: stackoverflow.com/questions/15481911/…
Ruturaj Bisure

Antworten:


78

Fügen Sie einfach ein #gefolgt von der ID des <a>Tags (oder eines anderen HTML-Tags wie a <section>) hinzu, zu dem Sie gelangen möchten. Wenn Sie beispielsweise versuchen, in diesem HTML-Code eine Verknüpfung zum Header herzustellen:

<p>This is some content.</p>
<h2><a id="target">Some Header</a></h2>
<p>This is some more content.</p>

Sie könnten den Link verwenden <a href="http://url.to.site/index.html#target">Link</a>.


2
Was ist, wenn diese ID mehrmals verwendet wird? Ich lief in eine MS - Site , die die verwendeten idvon id="in-closing">Some string</id>mehreren Zeiten , in denen Some stringeine neuen Zeichenfolge ein paar Mal wurden.
KayleeFrye_onDeck

5
@kayleeFrye_onDeck Dein HTML ist ungültig, wenn es mehrere gibt id. Per Definition idsoll es einzigartig für dieses Tag sein
Kolob Canyon

1
Vielen Dank für die Klarstellung, @KolobCanyon! :)
kayleeFrye_onDeck

Gibt es eine Möglichkeit, dies mit einer Klasse zu tun, die nur einmal verwendet wird?
Chagai Friedlander

29

Erstellen Sie einen "Sprunglink" im folgenden Format:

http://www.somesite.com/somepage#anchor

Wobei Anker die ID des Elements ist, auf das Sie auf dieser Seite verlinken möchten. Verwenden Sie Browser-Entwicklungstools / Ansichtsquelle, um die ID des Elements zu ermitteln, mit dem Sie einen Link erstellen möchten.

Wenn das Element keine ID hat und Sie diese Site nicht kontrollieren, können Sie dies nicht tun.


Was ist, wenn dem bestimmten Teil der Webseite keine ID zugeordnet ist?
KPMG

Dann müssen Sie die ID zum Element hinzufügen
Hauben

1
Kann ich einem Tag auf einer Webseite im Internet eine ID hinzufügen?
KPMG

2
Nein, wenn Sie dies auf einer anderen Website tun möchten, können Sie versuchen, ein benutzerdefiniertes JS-Lesezeichen zu erstellen, um zu dem Teil zu scrollen, zu dem Sie scrollen möchten. Sie können die verankerten Links nicht zum Laufen bringen, wenn die IDs nicht eingerichtet sind.
Hauben

Können Sie auf etwas verlinken, das Sie oben angegeben haben? Ich habe so etwas noch nie gemacht.
KPMG

10

Dies ist nur möglich, wenn diese Site Anker auf der Seite deklariert hat. Dazu geben Sie einem Tag einen Namen oder ein ID-Attribut. Suchen Sie also nach einem Tag , zu dem Sie einen Link erstellen möchten.

Und dann wäre die Syntax

<a href="page.html#anchor">text</a>

Das nameAttribut wird nur für das <a>Element unterstützt und ist in HTML 5 veraltet.
Quentin

Es konzentriert sich zu niedrig auf das Element für mich. Hat jemand dasselbe passiert?
Kolob Canyon

8

Wenn sich die Zielseite in derselben Domain befindet (dh denselben Ursprung mit Ihrer Seite hat) und es Ihnen nichts ausmacht, neue Registerkarten zu erstellen (1), können Sie (ab) JavaScript verwenden :

<a href="javascript:void(window.open('./target.html').onload=function(){this.document.querySelector('p:nth-child(10)').scrollIntoView()})">see tenth paragraph on another page</a>

Wissenswertes:

var w = window.open('some URL of the same origin');
w.onload = function(){
  // do whatever you want with `this.document`, like
  this.document.querySelecotor('footer').scrollIntoView()
}

Ein funktionierendes Beispiel für einen solchen "Exploit", den Sie jetzt ausprobieren können, könnte sein:

javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('/programming/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')

Wenn Sie dies in die Positionsleiste eingeben (beachten Sie, dass Chrome das javascript:Präfix entfernt, wenn es aus der Zwischenablage eingefügt wird) oder einen hrefWert für einen Link auf dieser Seite festlegen (mithilfe der Entwicklertools) und darauf klicken, wird eine weitere (doppelte) SO-Fragenseite angezeigt Die Fußzeile und die Fußzeile sind rot gestrichen. (Verzögerung wurde als Problemumgehung für Ajax-geladene Inhalte hinzugefügt, die die Fußzeile nach dem Laden nach unten drücken.)

Anmerkungen

  • In aktuellem Chrome und Firefox getestet, sollte im Allgemeinen funktionieren, da es auf einem definierten Standardverhalten basiert.
  • Kann hier bei SO nicht in einem interaktiven Snippet dargestellt werden, da sie vom Ursprung der Seite isoliert sind.
  • MDN: Window.open ()
  • (1) window.open(url,'_self')scheint das loadEreignis zu brechen ; Im Grunde window.openverhält sich das wie eine normale a href=""Klicknavigation. habe noch nicht mehr recherchiert.

huh es hat nicht nach unten gescrollt und der Boden ist nicht rot
John D

1
… Und es öffnete auch kein neues Fenster, nehme ich an. Höchstwahrscheinlich, weil die Ausführung von javascript:in die URL-Leiste eingegebenen Links in den meisten Browsern mit Standardeinstellungen als "Self-XSS" -Vorbeugung nicht mehr funktioniert. Sie können es jedoch in der Webentwickler-Konsole ausprobieren, wo es gut funktionieren sollte.
myf

Könnte jemand dies bitte bearbeiten und die Verwendung vereinfachen? Ich bin kein Javascript-Experte und konnte nicht herausfinden, was ich tun soll
Chagai Friedlander

3

Das erste Ziel bezieht sich auf die BlockID, die entweder in HTML-Code oder in Chromes-Entwicklertools enthalten ist, mit denen Sie eine Verknüpfung herstellen möchten. Jeder Code ist anders und Sie müssen etwas graben, um die ID zu finden, auf die Sie verweisen möchten. Es sollte ungefähr so ​​aussehen. div class="page-container drawer-page-content" id"PageContainer"Beachten Sie, dass dies das Format für den gesamten Abschnitt ist, auf den verwiesen wird, nicht für einen einzelnen Text oder ein einzelnes Bild. Dazu müssten Sie denselben Code finden, der sich jedoch auf Ihren Zielblock bezieht. Zum Beispiel habe dv id="your-block-id"ich gerade diesen Thread gelesen und mir kam die Idee, wenn Sie ein Shopify-Benutzer sind und dies tun möchten, ist es so ziemlich das Gleiche wie angegeben. Aber statt

> http://url.to.site/index.html#target

Sie würden setzen

> http://storedomain.com/target

Zum Beispiel richte ich eine Haftungsausschlussseite mit Links ein, die zu einer Newsletter-Anmeldung und Einkaufsblöcken auf meiner Homepage führen, damit ich https://mystore-classifier.com/#shopify-section-1528945200235meinen Hyperlink einfügen kann . Bitte beachten Sie, dass der Klassifizierer für meinen internen Gebrauch bestimmt ist und nicht für Sie gilt. Dies ist nur, damit ich meine Geschäfte im Auge behalten kann. Wenn Sie auf etwas anderes als Ihre Homepage verlinken möchten, würden Sie setzen

> http://mystore-classifier.com/pagename/#BlockID

Ich hoffe, jemand fand dies nützlich. Wenn etwas mit meiner Erklärung nicht stimmt, lassen Sie es mich bitte wissen, da ich kein HTML-Programmierer bin. Meine Sprache ist C #!


2

Die bevorstehende Chrome-Funktion "Zum Text scrollen" ist genau das, wonach Sie suchen.

https://github.com/bokand/ScrollToTextFragment

Sie fügen #targetText=im Grunde am Ende der URL hinzu und der Browser scrollt zum Zieltext und hebt ihn hervor, nachdem die Seite geladen wurde.

Es ist in der Version von Chrome, die auf meinem Schreibtisch ausgeführt wird, aber derzeit muss es manuell aktiviert werden. Vermutlich wird es in Kürze standardmäßig in den Chrome-Builds der Produktion aktiviert sein, und andere Browser werden folgen. OK, um jetzt mit dem Hinzufügen zu Ihren Links zu beginnen, und es wird dann funktionieren.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.