Vinculación a una parte específica de una página web

¿Cómo creo un enlace a una parte de una página web larga en otro sitio web que no controlo?

Pensé que podrías usar una variante de #partofpage al final de mi enlace. ¿Alguna sugerencia?

Simplemente agregue un #seguido del ID de la <a>etiqueta (u otra etiqueta HTML, como a <section>) a la que está tratando de acceder. Por ejemplo, si está intentando vincular al encabezado en este HTML:

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

Podrías usar el enlace <a href="http://url.to.site/index.html#target">Link</a>.

Cree un "enlace de salto" con el siguiente formato:

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

Donde ancla es la identificación del elemento al que desea vincular en esa página. Utilice las herramientas de desarrollo del navegador / ver la fuente para encontrar la identificación del elemento al que desea vincular.

Si el elemento no tiene una identificación y usted no controla ese sitio, entonces no puede hacerlo.

Eso solo es posible si ese sitio ha declarado anclas en la página. Se hace dando a una etiqueta un nombre o un atributo de identificación , así que busque cualquiera de los que estén cerca de donde desea vincular.

Y luego la sintaxis sería

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

En caso de que la página de destino esté en el mismo dominio (es decir, comparte el mismo origen con su página) y no le importa la creación de nuevas pestañas (1), puede (ab) usar algo de 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>

Trivialidades:

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

Un ejemplo práctico de tal 'exploit' que puede probar ahora mismo podría ser:

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

Si ingresa esto en la barra de ubicación (tenga en cuenta que Chrome elimina el javascript:prefijo cuando se pega desde el portapapeles) o conviértalo en unhref valor de cualquier enlace en esta página (usando las herramientas de desarrollo) y hace clic en él, obtendrá otra (duplicada) página de preguntas SO desplazada a el pie de página y el pie de página están pintados de rojo. (Retraso agregado como una solución para el contenido cargado ajax empujando el pie de página hacia abajo después de la carga).

Notas

• Probado en Chrome y Firefox actuales, generalmente debería funcionar ya que se basa en un comportamiento estándar definido.
• No se puede ilustrar en un fragmento interactivo aquí en SO, porque están aislados del origen de la página.
• MDN: Window.open ()
• (1) window.open(url,'_self')parece estar rompiendo el loadevento; básicamente hace que se window.opencomporte como una a href=""navegación de clic normal ; aún no he investigado más.

Primero fuera del objetivo se refiere al BlockID que se encuentra en el código HTML o en las herramientas de desarrollo de Chrome a las que está tratando de vincular. Cada código es diferente y deberá investigar un poco para encontrar la identificación a la que intenta hacer referencia. Debería verse algo así. div class="page-container drawer-page-content" id"PageContainer"Tenga en cuenta que este es el formato para toda la sección referenciada, no un texto o una imagen individual. Para hacer eso, necesitaría encontrar la misma pieza de código pero relacionada con su bloque de destino. Por ejemplo dv id="your-block-id"De todos modos, estaba leyendo este hilo y se me ocurrió una idea, si eres un usuario de Shopify y quieres hacer esto, es más o menos lo mismo que se dijo. Pero en lugar de

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

Tu pondrias

> http://storedomain.com/target

Por ejemplo, estoy configurando una página de exención de responsabilidad con enlaces que llevan a la suscripción a un boletín informativo y bloques de compras en mi página de inicio, así que inserto https://mystore-classifier.com/#shopify-section-1528945200235mi hipervínculo. Tenga en cuenta que el -clasificador es para mi uso interno y no se aplica a usted. Esto es solo para poder realizar un seguimiento de mis tiendas. Si desea vincular a algo que no sea su página de inicio, debe poner

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

Espero que a alguien le haya resultado útil, si hay algún problema con mi explicación, hágamelo saber, ya que no soy un programador HTML, ¡mi lenguaje es C #!

La próxima función "Desplazarse al texto" de Chrome es exactamente lo que está buscando ...

https://github.com/bokand/ScrollToTextFragment

Básicamente, agrega #targetText=al final de la URL y el navegador se desplazará hasta el texto de destino y lo resaltará después de que se cargue la página.

Está en la versión de Chrome que se ejecuta en mi escritorio, pero actualmente debe habilitarse manualmente. Es de suponer que pronto se habilitará de forma predeterminada en las versiones de producción de Chrome y otros navegadores seguirán, así que está bien comenzar a agregar a sus enlaces ahora y comenzará a funcionar entonces.