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

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

J'ai pensé que vous pourriez utiliser une variante de la #partofpage à la fin de mon lien. Aucune suggestion?

Ajoutez simplement un #suivi de l'ID de la <a>balise (ou d'une autre balise HTML, comme a <section>) à laquelle vous essayez d'accéder. Par exemple, si vous essayez de créer un lien vers l'en-tête dans ce code 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>.

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 créer un lien sur cette page. Utilisez les outils de développement de navigateur / afficher la source pour trouver l'ID de l'élément vers lequel vous souhaitez créer un lien.

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

Cela n'est possible que si ce site a déclaré des ancres dans la page. Cela se fait en donnant à une balise un nom ou un attribut d'identifiant , alors recherchez l'un de ceux proches de l'endroit où vous souhaitez établir un lien.

Et puis la syntaxe serait

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

Dans le cas où la page cible est sur le même domaine (c.-à-d. Partage la même origine avec votre page) et que la création de nouveaux onglets (1) ne vous dérange pas, vous pouvez (ab) utiliser du 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()
}

Un exemple de travail d'un tel `` exploit '' que vous pouvez essayer maintenant pourrait être:

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 vous entrez cela dans la barre d'adresse (sachez que Chrome supprime le javascript:préfixe lorsqu'il est collé du presse-papiers) ou en faites une hrefvaleur de n'importe quel lien sur cette page (à l'aide des outils de développement) et cliquez dessus, vous obtiendrez une autre (duplication) page de question SO défilée jusqu'à le pied de page et le pied de page sont peints en rouge. (Délai ajouté comme solution de contournement pour le contenu chargé en ajax poussant le pied de page vers le bas après le chargement.)

Remarques

• Testé dans Chrome et Firefox actuels, devrait généralement fonctionner car il est basé sur un comportement standard défini.
• Ne peuvent pas être illustrés dans l'extrait interactif ici à SO, car ils sont isolés de l'origine de la page.
• MDN: Window.open ()
• (1) window.open(url,'_self')semble briser l' loadévénement; fait essentiellement le window.opense comporter comme une a href=""navigation par clic normale ; n'ont pas encore recherché.

La première cible fait référence au BlockID trouvé dans le code HTML ou dans les outils de développement chromes auxquels vous essayez de créer un lien. Chaque code est différent et vous devrez faire quelques recherches pour trouver l'ID que vous essayez de référencer. Cela devrait ressembler à quelque chose comme div class="page-container drawer-page-content" id"PageContainer"Notez que c'est le format de toute la section référencée, pas un texte ou une image individuelle. Pour ce faire, vous devrez trouver le même morceau de code mais relatif à votre bloc cible. Par exemple dv id="your-block-id"Quoi qu'il en soit, je lisais juste ce fil et une idée m'est venue à l'esprit, si vous êtes un utilisateur de Shopify et que vous voulez le faire, c'est à peu près la même chose que celle indiquée. Mais au lieu de

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

Vous mettriez

> http://storedomain.com/target

Par exemple, je mets en place une page d'avertissement avec des liens menant à une inscription à la newsletter et des blocs d'achats sur ma page d'accueil, donc j'insère https://mystore-classifier.com/#shopify-section-1528945200235mon hyperlien. Veuillez noter que le -classifier est destiné à mon usage interne et ne s'applique pas à vous. C'est juste pour que je puisse garder une trace de mes magasins. Si vous souhaitez créer un lien vers autre chose que votre page d'accueil, vous devez mettre

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

J'espère que quelqu'un a trouvé cela utile, s'il y a quelque chose qui ne va pas avec mon explication, faites-le moi savoir car je ne suis pas un programmeur HTML, mon langage est C #!

La prochaine fonctionnalité Chrome "Faire défiler jusqu'au texte" est exactement ce que vous recherchez ...

https://github.com/bokand/ScrollToTextFragment

Vous ajoutez essentiellement #targetText=à la fin de l'URL et le navigateur fait défiler jusqu'au texte cible et le met en surbrillance une fois la page chargée.

C'est dans la version de Chrome qui fonctionne sur mon bureau, mais actuellement, il doit être activé manuellement. Vraisemblablement, il sera bientôt activé par défaut dans les versions de production de Chrome et d'autres navigateurs suivront, alors OK pour commencer à ajouter à vos liens maintenant et cela commencera à fonctionner alors.