Verknüpfen mit 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 der #partofpage am Ende meines Links verwenden. Irgendwelche Vorschläge?

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

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.

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>

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.

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 #!

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.