Как получить конкретный контент Div с другого сайта - PullRequest
Новая
       2

Как получить конкретный контент Div с другого сайта

0 голосов
/ 06 мая 2018

Я хочу получить содержимое таблицы веб-сайтов со своего сайта на мой сайт. Я получаю innerHTML с помощью следующей функции: 

function httpGet(theUrl)
{
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            createDiv(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", theUrl, false );
    xmlhttp.send();    
}


document.write(httpGet("https://cors.io/?http://crystalmathlabs.com/tracker-rs3/currenttop.php"));

function createDiv(responsetext)
{
    var _body = document.getElementsByTagName('body')[0];
    var _div = document.createElement('div');
    _div.innerHTML = responsetext;
    _body.appendChild(_div);
}

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

  1. Делая что-то с URL, чтобы заблокировать все элементы, кроме таблиц, которые я хочу, я даже не уверен, возможно ли это.

  2. Фильтрация всего по тексту ответа. Он возвращает строку, поэтому я думаю, что для этого понадобятся некоторые основные манипуляции со строками.

  3. Создайте временную div, чтобы я мог манипулировать всем через jQuery и JS, что немного странно, но я думаю, что это будет работать.

Каков наилучший способ сделать это? Или, может быть, идея, которую я еще не упомянул.

Ответы [ 2 ]

0 голосов
/ 06 мая 2018

Вы можете использовать функцию DocumentFragment createDocumentFragment.

Добавьте весь полученный HTML-код в documentFragment, а затем выберите нужные элементы HTML точно так же, как вы бы выбрали в документе, используя doucument.querySelector() для фрагмента, который вы используете fragment.querySelector()

DocumentFragments позволяет разработчикам размещать дочерние элементы в произвольных узлообразных родительских элементах, что позволяет взаимодействовать как узлы без истинного корневого узла. Это позволяет разработчикам создавать структуру без использования видимого DOM - увеличение скорости является истинным преимуществом.

Я бы начал с полученного HTML, использовал фиктивный HTML-код, выбрал table.my-class и добавил к пользовательскому элементу div, который вы можете изменить в соответствии со своими потребностями. 

var html = `<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table class="my-class">
<tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  </table>
</body>
</html>`;

$(function() {
  let fragment = document.createDocumentFragment();
  let temp = document.createElement('div');
  temp.innerHTML = html;
  fragment.appendChild(temp);
  var table = fragment.querySelector('table.my-class');
  document.querySelector('.preview').append(table);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
</div>
0 голосов
/ 06 мая 2018

Не уверен, что ваш вариант использования может вместить серверный код, но очень хороший пакет Node, который может решить этот сценарий, - это рентген.

Делая это на стороне сервера, вы избегаете проблем с CORS и, используя Node в качестве сервера, вы все равно будете писать все в JS.

x-ray также дает вам очень хороший вариантнапример, jquery для указания точного html-узла, который вы хотите захватить из HTML-ответа.

Подробности см. здесь: x-ray

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...