Enlace 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ía usar una variante de #partofpage al final de mi enlace. ¿Alguna sugerencia?

Solo agrega un # seguido del DNI del <a> etiqueta (u otra etiqueta HTML, como una <section>) al que intenta llegar. 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” usando el siguiente formato:

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

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

Si el elemento no tiene una identificación y 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 atributo de identificaciónasí que busca cualquiera de los que estén cerca de donde quieras enlazar.

Y entonces 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 algunas 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>

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 de trabajo 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)})})('https://stackoverflow.com/questions/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 javascript: prefijo cuando se pega desde el portapapeles) o convertirlo en un href valor de cualquier enlace en esta página (usando Herramientas de desarrollador) y haga clic en él, obtendrá otra página de preguntas SO (duplicada) desplazada hasta el pie de página y el pie de página pintado de rojo. (Retraso agregado como una solución para el contenido cargado con ajax que empuja 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 pueden ilustrar en un fragmento interactivo aquí en SO, porque están aislados del origen de la página.
• MDN: Ventana.abrir()
• (1) window.open(url,'_self') parece estar rompiendo el load evento; básicamente hace que el window.open comportarse como un normal a href="" haga clic en navegación; no he investigado más todavía.

La próxima función “Desplazarse a texto” de Chrome es exactamente lo que está buscando…

https://github.com/bokand/ScrollToTextFragment

básicamente agregas #targetText= al final de la URL y el navegador se desplazará hasta el texto de destino y lo resaltará después de cargar la página.

Está en la versión de Chrome que se ejecuta en mi escritorio, pero actualmente debe habilitarse manualmente. Presumiblemente, pronto estará habilitado de forma predeterminada en las compilaciones de producción de Chrome y otros navegadores lo seguirán, así que está bien para comenzar a agregar a sus enlaces ahora y comenzará a funcionar en ese momento.

Editar: se ha implementado en Chrome. Ver https://chromestatus.com/feature/4733392803332096

En primer lugar, el 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á intentando vincularse. Cada código es diferente y tendrá que investigar un poco para encontrar el ID al que intenta hacer referencia. Debería verse algo como div class="page-container drawer-page-content" id"PageContainer"Tenga en cuenta que este es el formato para toda la sección a la que se hace referencia, no para un texto o 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 indicó. pero en lugar de

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

pondrías

> http://example.com/target

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

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

Espero que alguien haya encontrado esto útil, si hay algún problema con mi explicación, hágamelo saber, ya que no soy un programador de HTML, ¡mi idioma es C #!

Tu puedes ahora…

A partir de la versión 81 de Chrome (febrero de 2020), hay una nueva característica llamada Fragmentos de texto. Le permite proporcionar un enlace que se abre en el texto preciso especificado (con ese texto resaltado).

De momento funciona en Edge, Chrome y Opera pero no en Firefox, Safari o Brave. (Consulte la nota 6 en la parte inferior para obtener más información)

Por razones de seguridad, la función requiere que los enlaces se abran en un contexto de noopener. Por lo tanto, asegúrese de incluir rel=”noopener” en su marcado de anclaje o agregue noopener a su lista Window.open() de características de funcionalidad de ventana.

Creas el enlace a tu texto deseado agregando esta cadena al final de la URL:

/#:~:text=

y proporcionando el codificado en porcentaje cadena de búsqueda así:

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

Aquí hay un ejemplo de trabajo:

https://newz.icu/#:~:text=Google%20surveillance%20aumenta

Notas:

1. Pruebe el enlace anterior solo en Chrome u Opera

2. En el ejemplo anterior, tenga en cuenta que la cadena de texto está en un div que normalmente está oculto al cargar la página, por lo que en este ejemplo se muestra a pesar de lo que sucedería normalmente. Útil.

3. Las versiones recientes de Chrome también incluyen una nueva opción cuando hace clic derecho en el texto seleccionado: Copiar enlace para resaltar. Esto creará automáticamente el enlace directo al texto para usted. (es decir, agrega automáticamente el /#:~:text= al texto que resaltaste) y colóquelo en el portapapeles; simplemente péguelo donde desee.

4. Suponga que desea resaltar un bloque completo de texto. La función Fragmentos de texto permite especificar un starting%20phrase y un ending%20phrase (separados por una coma)y resaltará todo el texto intermedio:
   
   https://newz.icu/#:~:text=Dr.%20Mullis,antes%20ahora
   
   ^{Tenga en cuenta la coma entre Mullis y before}

5. artículo de web.dev sobre fragmentos de texto

6. ¿Puedo usar el estado de los fragmentos de texto?

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.