Linking Naar een specifiek onderdeel van een webpagina

Hoe maak ik een link naar een deel van de lange webpagina op een andere website die ik niet controleer?

Ik dacht dat je een variant van de #partofpagina aan het einde van mijn link kon gebruiken. Suggesties?

Antwoord 1, Autoriteit 100%

Voeg gewoon een #gevolgd door de ID van de <a>TAG (of andere HTML-tag, zoals een <section>) dat je probeert te bereiken. Als u bijvoorbeeld probeert te koppelen aan de kop in deze HTML:

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

U kunt de koppeling gebruiken <a href="http://url.to.site/index.html#target">Link</a>.

Antwoord 2, Autoriteit 36%

Maak een “Jump Link” met behulp van het volgende formaat:

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

waar anker de ID is van het element waarnaar u wilt koppelen aan op die pagina. Gebruik Browser Development Tools / View Source om de ID van het element te vinden waarnaar u wilt koppelen.

Als het element geen ID heeft en u niet bedient die site, dan kunt u het niet doen.

Antwoord 3, Autoriteit 10%

Dat is alleen mogelijk als die site ankers op de pagina heeft verklaard.
Het wordt gedaan door een tag a naam of ID-attribuut , dus zoek een van die dichtbij waar u naar wilt linken.

En dan zou de syntaxis

zijn

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

Antwoord 4, Autoriteit 9%

In het geval dat de doelpagina zich op hetzelfde domein bevindt (dwz dezelfde oorsprongdeelt met uw pagina) en u het niet erg vindt om nieuwe tabbladen te maken (1), kunt u (misbruiken) sommige JavaScript:

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

Trivia:

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()
}

Een werkvoorbeeld van zo’n ‘exploit’ dat u nu kunt proberen, kan zijn:

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')

Als je dit invoert in de locatiebalk (let op dat Chrome het voorvoegsel javascript:verwijdert wanneer het van het klembord wordt geplakt) of er een href-waarde van maakt van een link op deze pagina ( met behulp van Developer Tools) en klik erop, je krijgt een andere (duplicaat) SO-vraagpagina die naar de voettekst en de voettekst rood is geverfd. (Vertraging toegevoegd als een tijdelijke oplossing voor met ajax geladen inhoud door de voettekst na het laden naar beneden te duwen.)

Opmerkingen

• Getest in de huidige Chrome en Firefox, zou over het algemeen moeten werken omdat het gebaseerd is op gedefinieerd standaardgedrag.
• Kan niet worden geïllustreerd in interactief fragment hier bij SO, omdat ze qua oorsprong geïsoleerd zijn van de pagina.
• MDN: Window.open()
• (1) window.open(url,'_self')lijkt de gebeurtenis loadte doorbreken; zorgt er in feite voor dat het window.openzich gedraagt als een normale a href=""kliknavigatie; heb nog niet meer onderzocht.

Antwoord 5, autoriteit 5%

De aankomende Chrome-functie ‘Scroll naar tekst’ is precies wat u zoekt….

https://github.com/bokand/ScrollToTextFragment

Je voegt in feite #targetText=toe aan het einde van de URL en de browser zal naar de doeltekst scrollen en deze markeren nadat de pagina is geladen.

Het is in de versie van Chrome die op mijn bureau draait, maar momenteel moet het handmatig worden ingeschakeld. Vermoedelijk zal het binnenkort standaard worden ingeschakeld in de productie van Chrome-builds en zullen andere browsers volgen, dus OK om nu te beginnen met het toevoegen aan je links en het zal dan beginnen te werken.

Antwoord 6, autoriteit 3%

Eerste doel verwijst naar de BlockID die wordt gevonden in HTML-code of Chromes-ontwikkelaarstools waarnaar u probeert te linken. Elke code is anders en je zult wat moeten graven om de ID te vinden waarnaar je probeert te verwijzen. Het zou er ongeveer zo uit moeten zien als div class="page-container drawer-page-content" id"PageContainer"Merk op dat dit het formaat is voor de hele sectie waarnaar verwezen wordt, niet een individuele tekst of afbeelding. Om dat te doen, moet u hetzelfde stuk code vinden, maar met betrekking tot uw doelblok. Bijvoorbeeld dv id="your-block-id"Hoe dan ook, ik was net deze thread aan het lezen en er kwam een idee in me op, als je een Shopify-gebruiker bent en dit wilt doen, is het zo goed als hetzelfde als vermeld.
Maar in plaats van

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

Je zou

> http://storedomain.com/target

Ik ben bijvoorbeeld een disclaimerpagina aan het opzetten met links die leiden naar een nieuwsbriefaanmelding en winkelblokkades op mijn startpagina, dus ik voeg https://mystore-classifier.com/#shopify-section-1528945200235voor mijn hyperlink.
Houd er rekening mee dat de -classifier voor intern gebruik is en niet op jou van toepassing is. Dit is gewoon zodat ik mijn winkels kan volgen.
Als u naar iets anders dan uw startpagina wilt linken, plaatst u

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

Ik hoop dat iemand dit nuttig vond. Als er iets mis is met mijn uitleg, laat het me dan weten, want ik ben geen HTML-programmeur, mijn taal is C#!