Как получть нужный url href cо страницы другого домена
 

Подскажите пожалуйста решение.
Как получить c site.ru/page.html 2-ю по счету ссылку и повесить ее на <button onclick="url">Открыть</button> на сайте site.com/page.html где будет размещена эта кнопка и этот скрипт.

На сайте site.ru/page.html добавьте заголовок Access-Control-Allow-Origin: site.com

На сайте site.com/page.htm разместите эту кнопку и этот скрипт...

<button id="my-button">Открыть</button>
<script>

const button = document.getElementById("my-button");
	
fetch("http://site.ru/page.html").then(async response => {
	const parser = new DOMParser();
	return parser.parseFromString(await response.text(), "text/html");
}).then(loadedDocument => {
	button.onclick = () => open(loadedDocument.links[1].href)
}).catch(error => {
	button.remove();
});

</script>

Malleys,
Спасибо за ответ. Но есть один момент. Сайт site.ru/page.html мне не принадлежит с которого хочу получить ссылку, поэтому заголовок прописать нет возможности. А будет это работать если на своем сайте я сначала выведу страницу чужого через фрейм, а потом уже обращусь через скрипт к ней?

Нет, но вы можете использовать сервис, который добавит нужные заголовки для работы в браузере, например, CORS Proxy... Вы можете добавить перед адресом запроса https://corsproxy.glitch.me/ и это будет работать, но я вам рекомендую использовать свой сервер, где будет запущен CORS Proxy, и который будет настроен под вас (например, ограничение доступа).

Например, тогда можно взять вторую ссылку с Яндекса...

<button id="my-button">Открыть</button>
<script>

const button = document.getElementById("my-button");
	
fetch("https://corsproxy.glitch.me/https://yandex.ru/").then(async response => {
	const parser = new DOMParser();
	return parser.parseFromString(await response.text(), "text/html");
}).then(loadedDocument => {
	button.onclick = () => open(loadedDocument.links[1].href)
}).catch(error => {
	button.remove();
});

</script>

Malleys,
Приведенный пример вами и некоторые другие работают, а вот с нужной мне страницей скрипт что-то не хочет. В консоли браузера вот это после клика по кнопке:
.
Видео нужно более точная настройка. Например по классу "link-title" атрибута "а" (<a class="link-title" href="" target=_top title=""><span></span></a>)

У а потому что берётся вторая по счёту ссылка которая на странице может и не быть.

Malleys, перепробовал от links[1] до links[10]. Но на выходе тот же результат.
Подскажите пожалуйста что на что заменить чтобы он тянул ссылку из , так сказать ткнуть его носом в нужный элемент, раз так не видит.

Заменить

button.onclick = () => open(loadedDocument.links[1].href)

на

button.onclick = () => open(loadedDocument.querySelector('a.link-title').href)

это будет первая ссылка с таким именем класса из имеющихся на странице. Если надо иную, то querySelectorAll('a.link-title')[нужный индекс]

laimas, работает. Но по какой-то причине ссылка не передается. Открыается пустая вкладка about:blank

Так работает или не работает? :)

laimas, 50 на 50 )). В консоли ошибок нет. Запросы получают ответ 200 что все ок. Но ссылка не передается при открытии браузером новой вкладки, после клика по кнопке. В адресной строке просто about:blank

На время сделать так:

console.log(loadedDocument)
//button.onclick = () => open(loadedDocument.querySelector('a.home-link').href)

Точно все есть в консоли во время когда вы жмахаете кнопку?

Ну и причина 50/50?

Добавьте перед button.onclick ..... эту строку button.disabled = false;, а самой кнопке пропишите атрибут disabled.

PS. Либо не выставляйте изначально кнопку, а добавляйте ее динамически:

//что изменить
.then(loadedDocument => {
    let button = document.createElement('button');
    button.textContent = 'Открыть';
    document.body.appendChild(button); //во что-то вставляем кнопку, здесь в конец всех элементов тела документа
    button.onclick = () => open(loadedDocument.querySelector('a.link-title').href);
}).catch(error => {
    console.log('Sorry');
});

//а эту строку удалить
const button = document.getElementById("my-button");

Ситуация следующая:
При querySelector('a.link-title').href); - при клике по кнопке это

При querySelectorAll('a.link-title').href); - новая вкладка опять с about:blank

Класс у ссылки единственный на странице. Не понимаю почему не находит даже с указателями [0-10]

Выполнить пост #12 и посмотреть что вы получаете, есть ли там ссылки нужные, мне же не ведомо что за страницу вы насилуете.

Посмотрите, что скачало, может на том сайте выполнен хитрый алгоритм по предотвращению скачивания (и вам показывают капчу), может там переход на другую страницу, может там ссылка внутри <iframe>, может эти ссылки создаются программно, мой скрипт находит ссылку именно в исходном коде страницы, так как если бы вы нажали Ctrl+U, чтобы посмотреть исходный код.

Обратите внимание на то, что мой код скачивает исходный код страницы, и в нём ищет ссылку, если вам нужен поиск ссылки в отрисованной странице, где выполнены все скрипты, то вам стоит использовать, например, puppeteer

(Если вы делаете что-то исключительно для себя, то может вам поможет браузерное расширение Tampermonkey)

Если document.links[1] не содержит ссылки, то querySelector('a.link-title') и подавно ничего не найдёт. Соответственно чтение свойства href у не существующего объекта вызовет ошибку! document.links содержит список всех ссылок на странице.

querySelectorAll('a.link-title') возвращает список элементов, даже если их нет (список пустой), вы читаете свойство href у самого списка элементов. Поэтому ошибки нет. Но у списка элементов нет свойства href, поэтому вы получаете undefined, который у вас открывается в виде about:blank

Вот как!

Вот оно что:

По не ведомой мне причине код не весь. Хотя пробовал на пхп тянуть ссылку, то все ок. Но в связи с некоторыми "Но", пхп не подходит так как сайт имеет некоторые региональные особенности.

Интересно как региональные особенности могут влиять на серверный язык. Какой-то язык же есть на сервере, делайте запрос сервером и отдавайте клиенту.

Так, что сервер ответит, например, на другом языке. (Читай про content negotiation)

Т. е. на сервере не получается отправить точно такой же запрос, какой был запрошен? Может не работать из-за геолокации. Так что за адрес? Было бы хорошо, если вы это указали, тогда можно указать конкретное решение хацкерской проблемы!

laimas, попросите адрес атакуемой страницы!

ЕЩЁ Так оно уже и так делается через сервер, интересно в чём отличия!

В параметрах запроса уж если у него и впрямь получается. Вот только не надо гнать пурги про регион, ибо утверждение, что РНР велик и могуч, а другие только и способны на наскальные рисунки, это вообще полный бред.

Дело в том что сама страница при прямом обращении к ней формирует свою уникальную ссылку в зависимости от того, откуда этот запрос страницы пришел. Пхп не подходит так как сайт на серверах в россии и он отдает полученный url всегда одинакового региона - россии, хотя посетитель на сайте будет с Украины допустим. Если пользователь из Украины на прямую обратится из браузера к той странице, то все сработает как нужно и ему отобразится страница с ссылкой сформированной под него. Нужно клиентское решение я так полагаю.
Нагуглил это..
но не знаю применимо ли оно в этом случае, для получения результата.