Посилання на певну частину веб-сторінки


93

Як створити посилання на частину довгої веб-сторінки на іншому веб-сайті, який я не контролюю?

Я думав, що ви можете використовувати варіант #partofpage в кінці мого посилання. Будь-які пропозиції?



Для того, щоб пов'язати цю частину використання відповідей наступне посилання, stackoverflow.com/questions/15481911 / ...
Ruturaj Bisure

Для того, щоб пов'язати цю частину використання сторінки посилання, stackoverflow.com/questions/15481911 / ...
Ruturaj Bisure

Відповіді:


82

Просто додайте #ідентифікатор <a>тегу (або іншого тегу HTML, наприклад a <section>), до якого ви намагаєтесь дістатися Наприклад, якщо ви намагаєтеся встановити посилання на заголовок у цьому HTML:

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

Ви можете використати посилання <a href="http://url.to.site/index.html#target">Link</a>.


3
Що робити, якщо цей ідентифікатор використовується кілька разів? Я натрапив на сайт MS , який використовується idв id="in-closing">Some string</id>кілька разів , коли Some stringстали нового рядка кілька разів.
kayleeFrye_onDeck

5
@kayleeFrye_onDeck Ваш HTML недійсний, якщо їх кілька id. За визначенням idмає бути унікальним для цього тегу
Каньйон

1
Дякуємо за роз'яснення, @KolobCanyon! :)
kayleeFrye_onDeck

чи є спосіб зробити це з класом, який використовується лише один раз?
Chagai Friedlander

Можливо, я був просто наївним, але коли я випадково www.site.com/page/#targetце зробив, це не вдалося. Переконайтеся, що у вас немає /кінця URL-адреси.
ной

30

Створіть "посилання на перехід", використовуючи такий формат:

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

Де прив'язка - це ідентифікатор елемента, на який ви хочете зробити посилання на цій сторінці. За допомогою інструментів розробки браузера / джерела перегляду знайдіть ідентифікатор елемента, на який ви хочете зробити посилання.

Якщо елемент не має ідентифікатора, і ви не контролюєте цей сайт, тоді ви не можете це зробити.


Що робити, якщо конкретна частина веб-сторінки не має ідентифікатора, пов’язаного з нею?
аджайсінгхнегі

Тоді вам потрібно буде додати id до елемента
cowls

1
Чи можу я додати ідентифікатор до тегу на веб-сторінці в Інтернеті?
ajaysinghnegi

2
Ні, якщо ви хочете зробити це на іншому веб-сайті, ви можете спробувати створити власну закладку JS, щоб перейти до тієї частини, до якої ви хочете прокрутити. Ви не можете змусити закріплені посилання працювати, якщо ідентифікатори не налаштовані.
кожухи

Чи можете ви зробити посилання на те, що ви вказали вище для цього? Я нічого подібного раніше не робив.
аджайсінгхнегі

10

Це можливо лише в тому випадку, якщо цей сайт оголосив якіри на сторінці. Це робиться шляхом присвоєння тегу імені або атрибуту id , тому шукайте будь-кого з тих, хто знаходиться поруч із місцем, куди ви хочете зробити посилання.

І тоді синтаксис був би

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

nameАтрибут підтримується тільки на <a>елементі для цього, і це є застарілим в HTML 5.
Квентін

Для мене це занадто низький фокус на елементі. У когось траплялося те саме?
Каньйон

8

Якщо цільова сторінка знаходиться в тому самому домені (тобто має однакове походження з вашою сторінкою), і ви не проти створення нових вкладок (1), ви можете (ab) використати деякі 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>

Дрібниці:

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

Робочим прикладом такого "експлоїту", який ви можете спробувати прямо зараз, може бути:

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

Якщо ви введете це в рядок місцезнаходження (майте на увазі, що Chrome видаляє javascript:префікс, коли вставляється з буфера обміну), або зробіть його ahref значення будь-якого посилання на цій сторінці (за допомогою Інструментів розробника) і клацніть на ньому, ви отримаєте іншу (дубльовану) сторінку запитань SO, прокручену до нижній і нижній колонтитули пофарбовані в червоний колір. (Затримка додана як обхідний шлях для вмісту, завантаженого за допомогою Ajax, що натискає нижній колонтитул вниз після завантаження.)

Примітки

  • Перевірено в поточних Chrome та Firefox, як правило, має працювати, оскільки воно базується на визначеній стандартній поведінці.
  • Неможливо проілюструвати в інтерактивному фрагменті тут на SO, оскільки вони ізольовані від сторінки за походженням.
  • MDN: Window.open ()
  • (1) window.open(url,'_self')здається, порушує loadподію; в основному змушує window.openповодитися як звичайна a href=""навігація клацанням; ще не досліджував більше.

га, це не прокрутилося донизу, а дно не червоне
John D

1
... і я не думаю, що це відкрило нове вікно. Швидше за все тому, що те, що виконання javascript:посилань, введених в URLbar, більше не працює в більшості браузерів із налаштуваннями за замовчуванням, як запобігання "self-XSS". Але ви можете спробувати це на консолі веб-розробників, де це має добре працювати.
myf

хтось може редагувати це і полегшити його використання? Я не фахівець з JavaScript, і я не міг зрозуміти, що робити
Чагай Фрідландер,

3

Перш за все ціль відноситься до BlockID, який міститься або в HTML-коді, або в інструментах розробника хромів, на які ви намагаєтеся зв’язати. Кожен код різний, і вам потрібно буде викопати кілька, щоб знайти ідентифікатор, на який ви намагаєтеся посилатися. Це повинно виглядати приблизно так: div class="page-container drawer-page-content" id"PageContainer"Зверніть увагу, що це формат для цілого розділу, на який посилається, а не окремого тексту чи зображення. Для цього вам знадобиться знайти той самий фрагмент коду, що стосується вашого цільового блоку. Наприклад, у dv id="your-block-id"будь-якому випадку я просто читав цю тему, і мені прийшла в голову ідея, якщо ви користувач Shopify і хочете це зробити, це майже те саме, що зазначено. Але замість

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

Ви б поставили

> http://storedomain.com/target

Наприклад, я встановлюю сторінку з відмовою від відповідальності із посиланнями, що ведуть до реєстрації бюлетеня та блоків покупок на моїй домашній сторінці, тому я вставляю https://mystore-classifier.com/#shopify-section-1528945200235своє гіперпосилання. Зверніть увагу, що класифікатор призначений для мого внутрішнього використання і не стосується вас. Це лише для того, щоб я міг відстежувати свої магазини. Якщо ви хочете зробити посилання на щось інше, ніж на вашу домашню сторінку, ви б поставили

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

Сподіваюсь, хтось знайшов це корисним, якщо щось не так з моїм поясненням, будь ласка, дайте мені знати, оскільки я не програміст HTML, моя мова - C #!


3

Майбутня функція Chrome "Прокрутка до тексту" - це саме те, що Ви шукаєте ....

https://github.com/bokand/ScrollToTextFragment

В основному ви додаєте #targetText=кінець URL-адреси, і браузер перейде до цільового тексту та виділить його після завантаження сторінки.

Це у версії Chrome, яка працює на моєму столі, але наразі її потрібно ввімкнути вручну. Імовірно, це незабаром буде ввімкнено за замовчуванням у виробничих збірках Chrome та інших браузерах, тож ОК, щоб почати додавати до своїх посилань зараз, і він почне працювати тоді.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.