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

Vous pouvez maintenant...

Depuis la version 81 de Chrome (février 2020), il existe une nouvelle fonctionnalité appelée Fragments de texte . Il vous permet de fournir un lien qui s'ouvre sur le texte précis spécifié (avec ce texte en surbrillance).

Pour l'instant, elle fonctionne dans Edge, Chrome et Opera mais pas dans Firefox, Safari ou Brave. (Voir la note 6 en bas de page pour plus d'informations)

Pour des raisons de sécurité, cette fonctionnalité exige que les liens soient ouverts dans un contexte de non-ouverture. Par conséquent, veillez à inclure rel="noopener" dans votre balisage d'ancrage ou à ajouter noopener à la liste des fonctionnalités de Window.open().

Vous créez le lien vers le texte souhaité en ajoutant cette chaîne à la fin de l'URL :

/#:~:text=

et en fournissant le encodé en pourcentage ainsi la chaîne de recherche :

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

Voici un exemple concret :

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

Notes :

1. Testez le lien ci-dessus dans Chrome ou Opera uniquement

2. Dans l'exemple ci-dessus, notez que la chaîne de texte se trouve dans une division qui est normalement masquée au chargement de la page. Dans cet exemple, elle est donc affichée malgré ce qui se passe normalement. Utile.

3. Les versions récentes de Chrome comprennent également une nouvelle option lorsque vous faites un clic droit sur le texte sélectionné : Copier le lien pour le mettre en évidence . Cela créera automatiquement le lien direct vers le texte pour vous. (c'est-à-dire qu'il ajoute automatiquement l'élément /#:~:text= au texte que vous avez mis en évidence) et le placer dans le presse-papiers - il suffit de le coller à l'endroit souhaité.

4. Supposons que vous souhaitiez mettre en évidence un bloc de texte entier ? La fonction Fragments de texte permet de spécifier un bloc de texte. starting%20phrase et un ending%20phrase (séparés par une virgule) et il mettra en évidence tout le texte situé entre les deux :
   https://newz.icu/#:~:text=Dr.%20Mullis,avant%20maintenant
   Notez la virgule entre Mullis et before

5. Article de web.dev sur les fragments de texte

6. Statut CanIUse des fragments de texte

   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.

Answer 2

Tout d'abord, la cible fait référence au BlockID trouvé dans le code HTML ou dans les outils de développement de chromes vers lequel vous essayez de créer un lien. Chaque code est différent et vous devrez creuser un peu pour trouver l'ID que vous essayez de référencer. Il devrait ressembler à quelque chose comme div class="page-container drawer-page-content" id"PageContainer" Notez qu'il s'agit du format pour l'ensemble de la section référencée, et non pour un texte ou une image individuelle. Pour ce faire, vous devez trouver le même morceau de code mais relatif à votre bloc cible. Par exemple dv id="your-block-id" Quoi qu'il en soit, j'ai lu ce fil de discussion et une idée m'est venue à l'esprit. Si vous êtes un utilisateur de Shopify et que vous voulez faire cela, c'est à peu près la même chose que ce qui a été dit. Mais au lieu de

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

Vous mettriez

> http://storedomain.com/target

Par exemple, je suis en train de mettre en place une page d'exclusion de responsabilité avec des liens menant à une inscription à la newsletter et à des blocs d'achat sur ma page d'accueil. https://mystore-classifier.com/#shopify-section-1528945200235 pour mon hyperlien. Veuillez noter que l'option -classificateur est destinée à mon usage interne et ne s'applique pas à vous. C'est juste pour que je puisse garder la 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 d'erroné dans mon explication, faites-le moi savoir car je ne suis pas un programmeur HTML, mon langage est le C# !