Ссылка на определенную часть веб-страницы

Как мне создать ссылку на часть длинной веб-страницы на другом веб-сайте, который я не контролирую?

Я подумал, что вы можете использовать вариант #partofpage в конце моей ссылки. Какие-либо предложения?

Просто добавьте, за #которым следует идентификатор <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>.

Создайте «ссылку перехода», используя следующий формат:

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

Где якорь - это идентификатор элемента, на который вы хотите создать ссылку на этой странице. Используйте инструменты разработки браузера / просмотрите исходный код, чтобы найти идентификатор элемента, на который вы хотите создать ссылку.

Если у элемента нет идентификатора, и вы не контролируете этот сайт, вы не можете этого сделать.

Это возможно только в том случае, если этот сайт объявил якоря на странице. Это делается путем присвоения тегу имени или атрибута id. , поэтому ищите любой из них, близкий к тому, на что вы хотите ссылку.

И тогда синтаксис будет

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

Если целевая страница находится в том же домене (т.е. имеет то же происхождение, что и ваша страница), и вы не возражаете против создания новых вкладок (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:префикс при вставке из буфера обмена) или сделайте егоhref значением любой ссылки на этой странице (с помощью инструментов разработчика) и щелкните по нему, вы получите еще одну (дублированную) страницу вопроса SO с прокруткой до нижний и нижний колонтитулы окрашены в красный цвет. (Задержка добавлена ​​в качестве обходного пути для содержимого, загруженного с помощью ajax, смещающего нижний колонтитул после загрузки.)

Примечания

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

В первую очередь цель относится к 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свою гиперссылку. Обратите внимание, что -classifier предназначен для моего внутреннего использования и не относится к вам. Это просто для того, чтобы я мог отслеживать свои магазины. Если вы хотите разместить ссылку не на свою домашнюю страницу, вы должны указать

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

Надеюсь, кто-то нашел это полезным, если что-то не так с моим объяснением, дайте мне знать, так как я не программист HTML, мой язык - C #!

Предстоящая функция Chrome «Прокрутить до текста» - это именно то, что вы ищете ....

https://github.com/bokand/ScrollToTextFragment

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

Он находится в той версии Chrome, которая запущена на моем столе, но в настоящее время его необходимо включить вручную. Предположительно, скоро он будет включен по умолчанию в производственных сборках Chrome, и другие браузеры последуют за ним, так что хорошо, чтобы начать добавлять свои ссылки сейчас, и тогда он начнет работать.