Вход

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


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

Malleys
19.10.2019, 22:10
На сайте 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>

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

Malleys
23.10.2019, 22:55
А будет это работать если на своем сайте я сначала выведу страницу чужого через фрейм, а потом уже обращусь через скрипт к ней?Нет, но вы можете использовать сервис, который добавит нужные заголовки для работы в браузере, например, CORS Proxy (https://github.com/Rob--W/cors-anywhere/)... Вы можете добавить перед адресом запроса 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>

basil.veber
24.10.2019, 01:25
Malleys,
Приведенный пример вами и некоторые другие работают, а вот с нужной мне страницей скрипт что-то не хочет. В консоли браузера вот это после клика по кнопке:
Uncaught TypeError: Cannot read property 'href' of undefined
at HTMLButtonElement.button.onclick.
Видео нужно более точная настройка. Например по классу "link-title" атрибута "а" (<a class="link-title" href="" target=_top title=""><span></span></a>)

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

basil.veber
24.10.2019, 13:22
Malleys, перепробовал от links[1] до links[10]. Но на выходе тот же результат.
Подскажите пожалуйста что на что заменить чтобы он тянул ссылку из a class="link-title", так сказать ткнуть его носом в нужный элемент, раз так не видит.

laimas
24.10.2019, 13:58
Заменить

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

на

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

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

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

laimas
24.10.2019, 15:55
работает ... Открыается пустая вкладка about:blank


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

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

laimas
24.10.2019, 16:28
На время сделать так:

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

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

laimas
24.10.2019, 16:33
Ну и причина 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");

basil.veber
24.10.2019, 19:06
PS. Либо не выставляйте изначально кнопку, а добавляйте ее динамически:
Ситуация следующая:
При querySelector('a.link-title').href); - при клике по кнопке это
https://i.ibb.co/hM8h1Kj/2.png
При querySelectorAll('a.link-title').href); - новая вкладка опять с about:blank
https://i.ibb.co/Lh1gzb8/image.png
Класс у ссылки единственный на странице. Не понимаю почему не находит даже с указателями [0-10]

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

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

Обратите внимание на то, что мой код скачивает исходный код страницы, и в нём ищет ссылку, если вам нужен поиск ссылки в отрисованной странице, где выполнены все скрипты, то вам стоит использовать, например, puppeteer (https://github.com/GoogleChrome/puppeteer)

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

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

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

Вот как!

basil.veber
24.10.2019, 21:15
Выполнить пост #12 и посмотреть что вы получаете, есть ли там ссылки нужные
Вот оно что:
https://i.ibb.co/bWK4QxJ/image.png
По не ведомой мне причине код не весь. Хотя пробовал на пхп тянуть ссылку, то все ок. Но в связи с некоторыми "Но", пхп не подходит так как сайт имеет некоторые региональные особенности.

laimas
24.10.2019, 21:22
сайт имеет некоторые региональные особенности

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

Malleys
24.10.2019, 22:05
Интересно как региональные особенности могут влиять на серверный язык. Так, что сервер ответит, например, на другом языке. (Читай про content negotiation (https://en.wikipedia.org/wiki/Content_negotiation))

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

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

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

laimas
25.10.2019, 06:12
интересно в чём отличия

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

basil.veber
25.10.2019, 06:49
Интересно как региональные особенности могут влиять на серверный язык.
Дело в том что сама страница при прямом обращении к ней формирует свою уникальную ссылку в зависимости от того, откуда этот запрос страницы пришел. Пхп не подходит так как сайт на серверах в россии и он отдает полученный url всегда одинакового региона - россии, хотя посетитель на сайте будет с Украины допустим. Если пользователь из Украины на прямую обратится из браузера к той странице, то все сработает как нужно и ему отобразится страница с ссылкой сформированной под него. Нужно клиентское решение я так полагаю.
Нагуглил это..
CSR (Client-Side Rendering, рендеринг на клиенте) — рендеринг приложения на стороне клиента (в браузере), обычно с помощью DOM;
но не знаю применимо ли оно в этом случае, для получения результата.