Lien vers une partie spécifique d'une page web

Question

Comment créer un lien vers une partie d'une longue page web sur un autre site web que je ne contrôle pas ?

Je pensais que vous pourriez utiliser une variante du #partofpage à la fin de mon lien. Des suggestions ?

Answer 1

Il suffit d'ajouter un # suivi de l'ID de la <a> (ou une autre balise HTML, comme une balise <section> ) que vous essayez d'atteindre. Par exemple, si vous essayez de créer un lien vers l'en-tête dans ce HTML :

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

Vous pouvez utiliser le lien <a href="http://url.to.site/index.html#target">Link</a> .

Answer 2

Créez un "lien de saut" en utilisant le format suivant :

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

Où ancre est l'identifiant de l'élément vers lequel vous souhaitez établir un lien sur cette page. Utilisez les outils de développement du navigateur / view source pour trouver l'identifiant de l'élément auquel vous souhaitez vous lier.

Si l'élément n'a pas d'identifiant et que vous ne contrôlez pas ce site, vous ne pouvez pas le faire.

Answer 3

Cela n'est possible que si ce site a déclaré des ancres dans la page. Cela se fait en donnant à une balise attribut nom ou id Il faut donc rechercher ceux qui sont proches de l'endroit où vous voulez créer un lien.

Et alors la syntaxe serait

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

Answer 4

Dans le cas où la page cible se trouve sur le même domaine (c'est-à-dire qu'elle partage le même nom de domaine que la page cible), il est possible d'utiliser le même nom de domaine. même origine avec votre page) et que la création de nouveaux onglets ne vous dérange pas (1), vous pouvez (ab)utiliser certaines 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()
}

Voici un exemple de cet "exploit" que vous pouvez essayer dès maintenant :

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 vous entrez ceci dans la barre d'emplacement (n'oubliez pas que Chrome supprime javascript: lorsqu'il est collé à partir du presse-papiers) ou faire en sorte que ce soit un href Si vous cliquez sur la valeur de n'importe quel lien de cette page (à l'aide des outils de développement) et que vous cliquez dessus, vous obtiendrez une autre page de questions sur le SO (dupliquée) qui défilera jusqu'au pied de page et qui sera peinte en rouge (un délai a été ajouté pour éviter que le contenu chargé par ajax ne pousse le pied de page vers le bas après le chargement).

Notas

• Testé dans les versions actuelles de Chrome et Firefox, il devrait généralement fonctionner puisqu'il est basé sur un comportement standard défini.
• Impossible d'illustrer les extraits interactifs ici à l'OS, car ils sont isolés de la page du point de vue de l'origine.
• MDN : Window.open()
• (1) window.open(url,'_self') semble briser la load qui, en fait, rend l window.open se comporter comme une personne normale a href="" cliquez sur la navigation ; je n'ai pas encore fait de recherches supplémentaires.

Answer 5

La nouvelle fonction "Défilement vers le texte" de Chrome est exactement ce que vous recherchez. ....

https://github.com/bokand/ScrollToTextFragment

En gros, vous ajoutez #targetText= à la fin de l'URL et le navigateur fera défiler le texte cible et le mettra en évidence après le chargement de la page.

Elle est présente dans la version de Chrome qui tourne sur mon bureau, mais elle doit actuellement être activée manuellement. On peut supposer qu'elle sera bientôt activée par défaut dans les versions de production de Chrome et que d'autres navigateurs suivront, alors n'hésitez pas à commencer à ajouter vos liens dès maintenant et elle commencera à fonctionner à ce moment-là.

Edit : Il a été implémenté dans Chrome. Voir https://chromestatus.com/feature/4733392803332096