Łącza do określonej części strony internetowej

Jak utworzyć łącze do części długiej strony w innej witrynie, której nie kontroluję?

Pomyślałem, że możesz użyć wariantu #partofpage na końcu mojego linku. Jakieś sugestie?

Po prostu dołącz a, #a po nim identyfikator <a>tagu (lub innego tagu HTML, np. A <section>), do którego próbujesz się dostać. Na przykład, jeśli próbujesz utworzyć link do nagłówka w tym kodzie HTML:

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

Możesz użyć linku <a href="http://url.to.site/index.html#target">Link</a>.

Utwórz „link przeskoku” w następującym formacie:

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

Gdzie zakotwiczenie to identyfikator elementu, do którego ma prowadzić łącze na tej stronie. Użyj narzędzi programistycznych przeglądarki / wyświetl źródło, aby znaleźć identyfikator elementu, do którego chcesz utworzyć link.

Jeśli element nie ma identyfikatora i nie kontrolujesz tej witryny, nie możesz tego zrobić.

Jest to możliwe tylko wtedy, gdy ta witryna zadeklarowała kotwice na stronie. Odbywa się to poprzez nadanie tagowi nazwy lub atrybutu identyfikatora , więc szukaj tych, które znajdują się blisko miejsca, do którego chcesz utworzyć link.

A potem składnia byłaby

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

W przypadku, gdy strona docelowa znajduje się w tej samej domenie (tj. Ma to samo źródło co Twoja strona) i nie masz nic przeciwko tworzeniu nowych zakładek (1), możesz (ab) użyć 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>

Drobnostki:

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

Działającym przykładem takiego „exploita”, który możesz teraz wypróbować, może być:

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

Jeśli wpiszesz to w pasek adresu (pamiętaj, że Chrome usunie javascript:prefiks po wklejeniu ze schowka) lub ustawisz go jako hrefwartość dowolnego linku na tej stronie (za pomocą Narzędzi dla programistów) i klikniesz go, otrzymasz kolejną (zduplikowaną) stronę z pytaniem SO przewiniętą do stopka i stopka pomalowane na czerwono. (Dodano opóźnienie jako obejście dla treści ładowanej przez Ajax, która przesuwa stopkę w dół po załadowaniu).

Uwagi

• Testowane w aktualnej wersji Chrome i Firefox, generalnie powinno działać, ponieważ opiera się na zdefiniowanym standardowym zachowaniu.
• Nie można ich zilustrować w interaktywnym fragmencie kodu tutaj w SO, ponieważ są one odizolowane od pochodzenia strony.
• MDN: Window.open ()
• (1) window.open(url,'_self')wydaje się przerywać loadwydarzenie; w zasadzie sprawia, że window.openzachowuje się jak normalna a href=""nawigacja po kliknięciu; nie zbadałem jeszcze więcej.

Pierwszy cel odnosi się do identyfikatora BlockID znajdującego się w kodzie HTML lub narzędziach programistycznych Chromes, do których próbujesz utworzyć link. Każdy kod jest inny i będziesz musiał trochę poszukać, aby znaleźć identyfikator, do którego próbujesz się odwołać. Powinien wyglądać mniej więcej tak. div class="page-container drawer-page-content" id"PageContainer"Zwróć uwagę, że jest to format całej sekcji, do której się odwołuje, a nie pojedynczego tekstu lub obrazu. Aby to zrobić, musisz znaleźć ten sam fragment kodu, ale odnoszący się do bloku docelowego. Na przykład w dv id="your-block-id"każdym razie właśnie czytałem ten wątek i przyszedł mi do głowy pomysł, jeśli jesteś użytkownikiem Shopify i chcesz to zrobić, jest to prawie to samo, co powiedziałem. Ale zamiast

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

Położyłbyś

> http://storedomain.com/target

Na przykład konfiguruję stronę z zastrzeżeniem z linkami prowadzącymi do subskrypcji biuletynu i bloków zakupów na mojej stronie głównej, więc wstawiam https://mystore-classifier.com/#shopify-section-1528945200235hiperłącze. Pamiętaj, że -klasyfikator służy do mojego użytku wewnętrznego i nie dotyczy Ciebie. To tylko po to, aby móc śledzić moje sklepy. Jeśli chcesz umieścić link do czegoś innego niż strona główna, umieść

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

Mam nadzieję, że ktoś uznał to za przydatne, jeśli coś jest nie tak z moim wyjaśnieniem, daj mi znać, ponieważ nie jestem programistą HTML, mój język to C #!

Nadchodząca funkcja „Przewiń do tekstu” w Chrome jest dokładnie tym, czego szukasz ....

https://github.com/bokand/ScrollToTextFragment

Zasadniczo dodajesz #targetText=na końcu adresu URL, a przeglądarka przewinie do tekstu docelowego i podświetli go po załadowaniu strony.

Jest w wersji Chrome, która działa na moim biurku, ale obecnie musi być ręcznie włączona. Prawdopodobnie wkrótce zostanie domyślnie włączony w produkcyjnych wersjach Chrome, a inne przeglądarki będą podążać za nim, więc OK, aby rozpocząć dodawanie do swoich linków teraz, a wtedy zacznie działać.