Verlinkung zu einem bestimmten Teil einer Webseite

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?

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

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.

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>

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.

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

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.