Link para uma parte específica de uma página da web


95

Como faço para criar um link para uma parte de uma página da web longa em outro site que eu não controlo?

Achei que você poderia usar uma variante da #partofpage no final do meu link. Alguma sugestão?



Para vincular esta parte da resposta, use o seguinte link: stackoverflow.com/questions/15481911/…
Ruturaj Bisure

Para vincular esta parte da página, use o seguinte link: stackoverflow.com/questions/15481911/…
Ruturaj Bisure

Respostas:


83

Basta acrescentar a #seguido pelo ID da <a>tag (ou outra tag HTML, como a <section>) que você está tentando acessar. Por exemplo, se você estiver tentando criar um link para o cabeçalho neste HTML:

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

Você pode usar o link <a href="http://url.to.site/index.html#target">Link</a>.


4
E se esse ID for usado várias vezes? Encontrei um site MS que usava o idde id="in-closing">Some string</id>várias vezes, onde Some stringse tornou uma nova string algumas vezes.
kayleeFrye_onDeck

5
@kayleeFrye_onDeck Seu HTML é inválido se houver vários de id. Por definição, idpretende ser exclusivo para essa marca
Kolob Canyon

1
Obrigado por esclarecer, @KolobCanyon! :)
kayleeFrye_onDeck

existe uma maneira de fazer isso com uma classe que é usada apenas uma vez?
Chagai Friedlander

Talvez eu fosse apenas ingênuo, mas quando o fiz acidentalmente www.site.com/page/#target, falhou. Certifique-se de que você não tem /no final do url.
noah

31

Crie um "link de salto" usando o seguinte formato:

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

Onde anchor é o id do elemento ao qual você deseja criar um link nessa página. Use as ferramentas de desenvolvimento do navegador / fonte de exibição para encontrar a id do elemento que você deseja vincular.

Se o elemento não tiver um id e você não controlar esse site, você não poderá fazer isso.


E se a parte específica da página da web não tiver um id associado a ela?
ajaysinghnegi

Em seguida, você precisará adicionar o id ao elemento
cowls

1
Posso adicionar um id a uma tag em uma página da web na Internet?
ajaysinghnegi

2
Não, se você quiser fazer isso em outro site, pode tentar criar um bookmarklet JS personalizado para rolar até a parte que deseja rolar. Você não pode fazer os links ancorados funcionarem se os ids não estiverem configurados.
cowls

Você pode criar um link para algo que especificou acima para fazer isso? Eu não fiz nada desse tipo antes.
ajaysinghnegi

10

Isso só é possível se esse site tiver âncoras declaradas na página. Isso é feito dando a uma tag um nome ou atributo de id , então procure por qualquer um perto de onde você deseja vincular.

E então a sintaxe seria

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

O nameatributo só é compatível com o <a>elemento para isso e é obsoleto em HTML 5.
Quentin

É focar muito baixo no elemento para mim. Alguém já viu a mesma coisa acontecer?
Kolob Canyon

8

Caso a página de destino esteja no mesmo domínio (ou seja, compartilhe a mesma origem com sua página) e você não se importe em criar novas guias (1), você pode (ab) usar algum 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>

Curiosidades:

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()
}

Um exemplo prático de tal 'exploit' que você pode tentar agora pode ser:

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')

Se você inserir isso na barra de localização (lembre-se de que o Chrome remove o javascript:prefixo quando colado da área de transferência) ou torne-o umhref valor de qualquer link nesta página (usando as Ferramentas do desenvolvedor) e clicar nele, você obterá outra página de perguntas SO (duplicada) rolada o rodapé e o rodapé são pintados de vermelho. (Atraso adicionado como uma solução alternativa para conteúdo carregado em Ajax empurrando o rodapé para baixo após o carregamento.)

Notas

  • Testado no Chrome e Firefox atuais, geralmente deve funcionar, pois é baseado no comportamento padrão definido.
  • Não pode ser ilustrado em snippet interativo aqui no SO, porque eles são isolados da página de origem.
  • MDN: Window.open ()
  • (1) window.open(url,'_self')parece estar interrompendo o loadevento; basicamente faz com que window.opense comporte como uma a href=""navegação normal de clique; não pesquisei mais ainda.

huh não rolou para a parte inferior e a parte inferior não é vermelha
John D

1
… E nem abriu uma nova janela, suponho. Muito provavelmente porque, de fato, a execução de javascript:links digitados na URLbar não funciona mais na maioria dos navegadores com configurações padrão, como prevenção de "auto-XSS". Mas você pode tentar no console do Web Developers, onde deve funcionar bem.
myf

alguém poderia editar isso e torná-lo mais fácil de usar? Não sou um especialista em javascript e não consegui descobrir o que fazer
Chagai Friedlander

3

O primeiro fora do alvo se refere ao BlockID encontrado no código HTML ou nas ferramentas de desenvolvedor do chromes que você está tentando vincular. Cada código é diferente e você precisará fazer algumas pesquisas para encontrar o ID que está tentando fazer referência. Deve ser parecido com div class="page-container drawer-page-content" id"PageContainer"Observe que este é o formato de toda a seção referenciada, não um texto ou imagem individual. Para fazer isso, você precisaria encontrar o mesmo trecho de código, mas relacionado ao seu bloco de destino. Por exemplo: dv id="your-block-id"De qualquer forma, eu estava lendo este tópico e uma ideia me veio à mente, se você é um usuário do Shopify e deseja fazer isso, é praticamente a mesma coisa que foi dito. Mas em vez de

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

Você colocaria

> http://storedomain.com/target

Por exemplo, estou configurando uma página de isenção de responsabilidade com links que levam à inscrição em um boletim informativo e bloqueios de compras na minha página inicial, portanto, insiro https://mystore-classifier.com/#shopify-section-1528945200235no meu hiperlink. Observe que o -classifier é para meu uso interno e não se aplica a você. Isso é apenas para que eu possa controlar minhas lojas. Se você quiser criar um link para algo diferente de sua página inicial, você deve colocar

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

Espero que alguém tenha achado isso útil, se houver algo errado com minha explicação, por favor me avise, pois eu não sou um programador de HTML minha linguagem é C #!


3

O próximo recurso "Role para texto" do Chrome é exatamente o que você está procurando ...

https://github.com/bokand/ScrollToTextFragment

Você basicamente adiciona #targetText=no final do URL e o navegador rola até o texto de destino e o realça depois que a página é carregada.

Está na versão do Chrome que está rodando em minha mesa, mas atualmente deve ser habilitado manualmente. Presumivelmente, em breve será ativado por padrão nas compilações de produção do Chrome e outros navegadores seguirão, então OK para começar a adicionar aos seus links agora e começará a funcionar então.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.