Получить данные с другой HTML-страницы - PullRequest
Новая
       7

Получить данные с другой HTML-страницы

0 голосов
/ 06 сентября 2018

Я делаю интернет-магазин по продаже журналов, и мне нужно показать имидж журнала. Для этого я хотел бы показать то же изображение, которое отображается на веб-сайте компании, распространяющей журналы.

Для этого было бы легко с абсолютным путем, как это: 

<img src="http://www.remotewebsite.com/image.jpg" />

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

В Javascript можно получить путь к изображению с помощью этого кода: 

var strImage = document.getElementById('Image').src;

Но возможно ли использовать что-то подобное для получения пути к изображению, если оно находится на другой HTML-странице?

Ответы [ 3 ]

0 голосов
/ 06 сентября 2018

Предполагая, что вы знаете, как найти правильное изображение в DOM сайта журнала (иначе забудьте об этом):

  • веб-сайт журнала должен явно разрешать клиентам, показывающим ваш веб-сайт, получать их содержимое, включив CORS
  • вы извлекаете их HTML -> получает вам поток текста
  • разобрать его с помощью DOMParser -> получить документ
  • используя ваши знания или их расположение (или хорошую эвристику, если вам повезет), используйте обычную DOM-навигацию, чтобы найти изображение и получить его src атрибут

Я не буду вдаваться в подробности ни одного из этих шагов (уже есть много ответов SO), тем более что вы не описали конкретную проблему, которая может возникнуть у вас с технической частью.

0 голосов
/ 06 сентября 2018

То, что вы просите, технически возможно, и другие ответы уже вошли в подробности о том, как вы могли бы сделать это.

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

Создайте базу данных на сервере, где будет жить ваше приложение. Будет работать простая MySQL БД, но вы можете использовать что угодно. Создайте таблицу с именем magazine с колонкой url . Ваш код будет тянуть URL из этой БД. Всякий раз, когда изменяется URL журнала, просто обновите БД, и сам код изменять не нужно.

Вашему внешнему коду необходим какой-то способ доступа к БД. Одним из возможных решений является REST API. Этот код будет запрашивать в БД последние значения (в URL вашего журнала) и делать их доступными для вашей веб-страницы. Это можно сделать на множестве разных языков / фреймворков, вот хороший учебник о том, как сделать что-то подобное в Node.js и express (это то, что я лично использовал).

Наконец, ваш интерфейсный код должен вызвать API REST для получения обновленных URL-адресов. Это должно быть сделано с помощью некоторого языка на основе JavaScript. jQuery сделает это действительно легко, примерно так: 

$(document).ready(function() {
  $.Get("http://uri_to_your_rest_api", function(data) {
    $("#myImage").attr("scr", data.url);
  }
});

Предположим, у вас был такой HTML: 

<img id="myImage" src="">

И все - у вас есть веб-страница, которая динамически извлекает источники изображений из вашей базы данных.

Теперь, если вы просто погружаетесь в веб-разработку, это может показаться немного ошеломляющим. Но я обещаю вам, что в конечном итоге это будет легче, чем пытаться разобрать код со страницы HTML:)

0 голосов
/ 06 сентября 2018

Можно, но это неэффективно. Вам нужно будет сделать запрос, чтобы загрузить весь HTML-код этой другой страницы, а затем в этом HTML-коде найти изображение, которое вы ищете.

Этого можно достичь (используя XMLHttpRequest или fetch ), но я бы, возможно, попытался найти более эффективный способ.

...