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

93

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?

mjmuk
la source
Pour lier cette partie de la réponse, utilisez le lien suivant, stackoverflow.com/questions/15481911/…
Ruturaj Bisure
Pour lier cette partie de la page, utilisez le lien suivant, stackoverflow.com/questions/15481911/…
Ruturaj Bisure

Réponses:

82

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

Une personne
la source
3
Et si cet identifiant est utilisé plusieurs fois? Je suis tombé sur un site MS qui a utilisé le idde id="in-closing">Some string</id>plusieurs fois où Some stringest devenu une nouvelle chaîne plusieurs fois.
kayleeFrye_onDeck
5
@kayleeFrye_onDeck Votre code HTML n'est pas valide s'il existe un multiple de id. Par définition, il idest censé être unique à ce tag
Kolob Canyon
1
Merci d'avoir clarifié, @KolobCanyon! :)
kayleeFrye_onDeck
y a-t-il un moyen de faire cela avec une classe qui n'est utilisée qu'une seule fois?
Chagai Friedlander
Peut-être que j'étais juste naïf, mais quand je l'ai fait accidentellement, www.site.com/page/#targetcela a échoué. Assurez-vous que vous n'avez pas le /à la fin de l'URL.
noah
29

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.

capots
la source
Que faire si la partie spécifique de la page Web n'est pas associée à un identifiant?
ajaysinghnegi
Ensuite, vous devrez ajouter l'identifiant à l'élément
capots
1
Puis-je ajouter un identifiant à une balise sur une page Web sur Internet?
ajaysinghnegi
2
Non, si vous souhaitez effectuer cette opération sur un autre site Web, vous pouvez essayer de créer un signet JS personnalisé pour faire défiler jusqu'à la partie vers laquelle vous souhaitez faire défiler. Vous ne pouvez pas faire fonctionner les liens ancrés si les identifiants ne sont pas configurés.
capots
Pouvez-vous créer un lien vers quelque chose que vous avez spécifié ci-dessus pour faire cela? Je n'ai rien fait de ce genre auparavant.
ajaysinghnegi
10

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>
Fredrik
la source
L' nameattribut n'est pris en charge que sur l' <a>élément pour cela, et il est obsolète en HTML 5.
Quentin
Il se concentre trop bas sur l'élément pour moi. Quelqu'un a-t-il eu la même chose?
Kolob Canyon
8

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é.
mon f
la source
hein ça n'a pas défilé vers le bas et le bas n'est pas rouge
John D
1
… Et cela n'a ouvert aucune nouvelle fenêtre, je suppose. Très probablement parce que l'exécution des javascript:liens saisis dans la barre d'URL ne fonctionne plus dans la plupart des navigateurs avec les paramètres par défaut, comme la prévention «auto-XSS». Mais vous pouvez l'essayer dans la console Web Developers, où cela devrait bien fonctionner.
myf
quelqu'un pourrait-il modifier ceci et le rendre plus facile à utiliser? Je ne suis pas un expert javascript et je ne savais pas quoi faire
Chagai Friedlander
3

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

Ryan Buchanan
la source
3

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.

bigjosh
la source