Verlinkung zu einem bestimmten Teil einer Webseite

Lesezeit: 9 Minuten

Benutzeravatar von mjmuk
mjmuk

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 des #partofpage am Ende meines Links verwenden. Irgendwelche Vorschläge?

  • Mögliches Duplikat von Wie verlinke ich auf einen Teil einer Seite? (Hash?)

    – QUentin

    2. November 2016 um 16:37 Uhr

  • Um diesen Teil der Antwort zu verknüpfen, verwenden Sie den folgenden Link: stackoverflow.com/questions/15481911/…

    – Ruturaj Bisure

    26. Dezember 2017 um 13:25 Uhr

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

    – Ruturaj Bisure

    26. Dezember 2017 um 13:26 Uhr

  • Wenn dies in Atlassian Confluence benötigt wird, ist es nicht sehr einfach, aber sie haben es hier dokumentiert: confluence.atlassian.com/doc/anchors-139442.html

    – eb

    2. Juni 2021 um 15:49 Uhr

Der Benutzeravatar von APerson
Eine Person

Einfach ein anhängen # gefolgt von der ID der <a> -Tag (oder ein anderes HTML-Tag, wie z <section>), auf die Sie zugreifen möchten. Wenn Sie beispielsweise versuchen, auf die Kopfzeile in diesem HTML zu verlinken:

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

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

  • Was ist, wenn diese ID mehrmals verwendet wird? Ich bin auf eine MS-Site gestoßen, die die verwendet hat id von id="in-closing">Some string</id> mehrfach wo Some string wurde ein paar Mal zu einer neuen Saite.

    – kayleeFrye_onDeck

    16. Mai 2018 um 20:48 Uhr

  • @kayleeFrye_onDeck Ihr HTML-Code ist ungültig, wenn es mehrere davon gibt id. Per Definition id soll für dieses Tag eindeutig sein

    – Kellen Stuart

    16. Januar 2019 um 19:41 Uhr

  • Danke für die Klarstellung, @KolobCanyon! 🙂

    – kayleeFrye_onDeck

    16. Januar 2019 um 21:12 Uhr


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

    – Chagai Friedländer

    23. Dezember 2019 um 22:34 Uhr

  • Vielleicht war ich nur naiv, aber als ich es versehentlich tat www.site.com/page/#target es ging schief. Stellen Sie sicher, dass Sie das nicht haben / am Ende der URL.

    – Noah

    16. Oktober 2020 um 16:48 Uhr

Benutzeravatar von cowls
Hauben

Erstellen Sie einen „Sprunglink“ im folgenden Format:

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

Wo Anker die ID des Elements ist, zu dem Sie auf dieser Seite verlinken möchten. Verwenden Sie Browser-Entwicklungstools / Quellcode anzeigen, um die ID des Elements zu finden, zu dem Sie verlinken möchten.

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

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

    – ajaysinghnegi

    27. Dezember 2018 um 12:55 Uhr

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

    – Hauben

    29. Dezember 2018 um 18:58 Uhr

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

    – ajaysinghnegi

    30. Dezember 2018 um 5:27 Uhr

  • 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

    30. Dezember 2018 um 15:25 Uhr

  • Jay, es ist nicht möglich, ein Bookmarklet zu haben, das zu einer Seite navigiert und zu einer bestimmten Position scrollt. Sobald Ihr Bookmarklet den Standort ändert, wird die Seite neu geladen, sodass Ihr js verloren geht. Aber zu Ihrer Information: Ein Bookmarklet, das auf Ihrer aktuellen Seite bis 500 Pixel von oben nach unten scrollt, würde so aussehen: javascript:scroll({top:500})

    – Frazer Kirkmann

    15. Februar 2019 um 1:12 Uhr

Fredriks Benutzeravatar
Fredrik

Das ist nur möglich, wenn diese Site Anker in der Seite deklariert hat. Dies geschieht durch Angabe eines Tags a Name- oder ID-Attributsuchen Sie also nach solchen in der Nähe, auf die Sie verlinken möchten.

Und dann wäre die Syntax

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

  • Das name -Attribut wird nur auf dem unterstützt <a> -Element dafür und ist in HTML 5 veraltet.

    – QUentin

    2. November 2016 um 16:37 Uhr

  • Es konzentriert sich zu wenig auf das Element für mich. Ist jemandem das gleiche passiert?

    – Kellen Stuart

    16. Januar 2019 um 19:35 Uhr


Benutzeravatar von myf
meinf

Falls sich die Zielseite auf derselben Domain befindet (d. h. die gleiche Herkunft mit Ihrer Seite) und es Ihnen nichts ausmacht, neue Tabs zu erstellen (1), können Sie einige (ab)verwenden JavaScript:

<a href="https://stackoverflow.com/questions/15481911/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)})})('https://stackoverflow.com/questions/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')

Wenn Sie dies in die Adressleiste eingeben (beachten Sie, dass Chrome entfernt javascript: Präfix beim Einfügen aus der Zwischenablage) oder machen Sie es a href Wert eines beliebigen Links auf dieser Seite (unter Verwendung der Entwicklertools) und klicken Sie darauf, erhalten Sie eine weitere (duplizierte) SO-Fragenseite, die zur Fußzeile gescrollt und die Fußzeile rot gefärbt ist. (Verzögerung als Problemumgehung für Ajax-geladene Inhalte hinzugefügt, die die Fußzeile nach dem Laden nach unten drücken.)

Anmerkungen

  • Getestet in aktuellem Chrome und Firefox, sollte generell funktionieren, da es auf definiertem Standardverhalten basiert.
  • Kann hier bei SO nicht im interaktiven Snippet dargestellt werden, da sie vom Ursprung her von der Seite isoliert sind.
  • MDN: Window.open()
  • (1) window.open(url,'_self') scheint das zu brechen load Veranstaltung; im Grunde macht das window.open verhalte dich wie ein normaler a href="" Klicknavigation; habe noch nicht weiter recherchiert.

Benutzeravatar von bigjosh
Großer Josch

Die kommende Chrome-Funktion “Zum Text scrollen” ist genau das, wonach Sie suchen….

https://github.com/bokand/ScrollToTextFragment

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

Es befindet sich in der Version von Chrome, die auf meinem Schreibtisch ausgeführt wird, aber derzeit muss es manuell aktiviert werden. Vermutlich wird es bald standardmäßig in den Produktions-Chrome-Builds aktiviert und andere Browser werden folgen, also können Sie jetzt mit dem Hinzufügen zu Ihren Links beginnen und es wird dann funktionieren.

Bearbeiten: Es wurde in Chrome implementiert. Sehen https://chromestatus.com/feature/4733392803332096

Benutzeravatar von Stephen Ostermiller
Stephan Ostermüller

Das erste Ziel bezieht sich auf die BlockID, die entweder im HTML-Code oder in den Chrome-Entwicklertools zu finden ist, auf die Sie verlinken möchten. Jeder Code ist anders und Sie müssen etwas suchen, 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 auf einen einzelnen Text oder ein einzelnes Bild. Dazu müssten Sie denselben Code finden, der sich jedoch auf Ihren Zielblock bezieht. Zum Beispiel dv id="your-block-id" Wie auch immer, ich habe gerade diesen Thread gelesen und mir kam eine Idee in den Sinn, wenn Sie ein Shopify-Benutzer sind und dies tun möchten, ist es so ziemlich dasselbe wie angegeben. Aber statt

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

Du würdest setzen

> http://example.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 sie einfüge https://mystore-classifier.com/#shopify-section-1528945200235 für meinen Hyperlink. Bitte beachten Sie, dass der -classifier für meinen internen Gebrauch bestimmt ist und nicht für Sie gilt. Das 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.example/pagename/#BlockID

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

Du kannst jetzt…

Ab Chrome Release 81 (Februar 2020) gibt es eine neue Funktion namens Textfragmente. Es ermöglicht Ihnen, einen Link bereitzustellen, der genau an dem angegebenen Text geöffnet wird (wobei dieser Text hervorgehoben ist).

Im Moment funktioniert es in Edge, Chrome und Opera, aber nicht in Firefox, Safari oder Brave. (Siehe Anmerkung 6 unten für mehr)

Aus Sicherheitsgründen erfordert die Funktion, dass Links in einem Noopener-Kontext geöffnet werden. Stellen Sie daher sicher, dass Sie rel=”noopener” in Ihr Anker-Markup aufnehmen, oder fügen Sie noopener zu Ihrer Window.open()-Liste der Fensterfunktionen hinzu.

Sie erstellen den Link zu Ihrem gewünschten Text, indem Sie diese Zeichenfolge an das Ende der URL anhängen:

/#:~:text=

und Bereitstellung der Prozentkodiert Suchbegriff also:

 /#:~:text=String%20to%20focus%20on

Hier ist ein funktionierendes Beispiel:

https://newz.icu/#:~:text=Google%20Überwachung%20erhöht

Anmerkungen:

  1. Testen Sie den obigen Link nur in Chrome oder Opera

  2. Beachten Sie im obigen Beispiel, dass sich die Textzeichenfolge in einem div befindet, das normalerweise beim Laden der Seite ausgeblendet wird. In diesem Beispiel wird sie also trotz dessen angezeigt, was normalerweise passieren würde. Nützlich.

  3. Neuere Versionen von Chrome enthalten auch eine neue Option wenn Sie mit der rechten Maustaste auf ausgewählten Text klicken: Kopieren Sie den Link, um ihn hervorzuheben. Dadurch wird automatisch der Direct-to-Text-Link für Sie erstellt (dh es fügt automatisch die /#:~:text= zu dem markierten Text) und lege es in die Zwischenablage – füge es einfach an der gewünschten Stelle ein.

  4. Angenommen, Sie möchten einen ganzen Textblock hervorheben? Die Funktion Textfragmente ermöglicht die Angabe von a starting%20phrase und ein ending%20phrase (getrennt durch ein Komma)und es wird den gesamten Text dazwischen hervorheben:

    https://newz.icu/#:~:text=Dr.%20Mullis,before%20now

    Beachten Sie das Komma dazwischen Mullis und before

  5. web.dev-Artikel über Textfragmente

  6. CanIUse-Status von Textfragmenten

PS - Please forgive choice of example website. It simply had the desired 
elements required for the demonstration. Hoping we can focus on function 
rather than content.

1429800cookie-checkVerlinkung zu einem bestimmten Teil einer Webseite

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy