web-dev-qa-db-fra.com

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?

Je pensais que vous pourriez utiliser une variante de la #partofpage à la fin de mon lien. Aucune suggestion?

hyperlink
59
mjmuk

Ajoutez simplement un # suivi de l'ID de la balise <a> (ou d'une autre balise HTML, telle qu'un <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>.

48
APerson

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 auquel vous souhaitez créer 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 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.

23
cowls

Cela n'est possible que si ce site a déclaré des ancres dans la page. Pour ce faire, donnez à un tag attribut name ou id , recherchez donc ceux qui sont proches de l'endroit où vous souhaitez créer un lien.

Et puis la syntaxe serait

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

Si la page cible se trouve sur le même domaine (c'est-à-dire qu'elle partage la même origine avec votre page) et que la création de nouveaux onglets ne vous gêne pas, vous pouvez (ab) utiliser un peu de 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 concret de cet "exploit" que vous pouvez essayer 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 (gardez à l’esprit que Chrome supprime le préfixe javascript: lorsqu’il est collé à partir du presse-papiers) ou en fait une valeur href de tout lien de cette page (à l’aide des outils de développement). et cliquez dessus, vous obtiendrez une autre (copie) SO page de question défilée jusqu'au pied de page et au pied de page peint en rouge. (Délai ajouté en tant que solution de contournement pour le contenu chargé en ajax abaissant le pied de page après le chargement.)

Remarques

  • Testé dans Chrome actuel et Firefox, devrait normalement fonctionner, car il est basé sur un comportement standard défini.
  • Ne peut pas être illustré dans l'extrait interactif ici à SO, car ils sont isolés de la page Origin-wise.
  • MDN: Window.open ()
  • (1) window.open(url,'_self') semble rompre l'événement load; fait en sorte que le window.open se comporte comme un a href="" navigation normale; pas encore fait de recherches.
6
myf

Tout d'abord, cible fait référence à l'ID de bloc trouvé dans le code HTML ou dans les outils de développement chromes auxquels vous essayez d'établir un lien. Chaque code est différent et vous devrez faire des recherches pour trouver l'identifiant que vous essayez de référencer. Cela devrait ressembler à quelque chose comme div class="page-container drawer-page-content" id"PageContainer"Notez qu'il s'agit du format de toute la section référencée, et non d'un texte ou d'une image en particulier. 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, je lisais 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 quasiment la même chose que ce qui est indiqué. 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 de non-responsabilité avec des liens menant à une inscription à la newsletter et des blocs d’achats sur ma page d’accueil afin d’insérer https://mystore-classifier.com/#shopify-section-1528945200235 dans mon hyperlien. S'il vous plaît noter que le -classifier est pour 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 pouvez mettre

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

J'espère que quelqu'un trouvera cela utile. S'il y a quelque chose qui ne va pas dans mon explication, merci de me le signaler car je ne suis pas un programmeur HTML, mon langage est le C #!

3
Ryan Buchanan

La fonctionnalité à venir Chrome "Faire défiler jusqu'au texte" correspond 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 surligne après le chargement de la page.

Il s’agit de la version de Chrome en cours d’exécution sur mon bureau, mais doit actuellement être activée manuellement. Vraisemblablement, il sera bientôt activé par défaut dans les versions de production Chrome et les autres navigateurs suivront, alors cliquez sur OK pour commencer à ajouter des liens à vos liens maintenant.

0
bigjosh