Question

我想从他们的网站到我的网站获取网站表格内容。我通过以下函数获取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);
}

所以这基本上复制了网站页面没有所有的样式和图像和东西很好，但我想将它简化为使用特定类名的表。我想到了几种方法......

对URL进行操作以阻止除我想要的表格之外的所有元素，我甚至不确定这是否可行。
过滤掉响应文本中的所有内容。它返回一个字符串，所以我想我需要一些主要的字符串操作才能做到这一点。
制作一个临时的div，这样我就可以通过jQuery和JS操作一切，这有点像黑客的方式，但我认为它会起作用。

最好的方法是什么？或者也许是我还没有提到的想法。

Answer 1

不确定您的用例是否可以容纳服务器端代码，但可以解决此问题的非常好的Node包是X射线。

通过在服务器端执行此操作可以避免CORS问题，并且通过将Node用作服务器，您仍然可以在JS中编写所有内容。

x-ray还为您提供了一个非常好的选项，比如jquery，可以指向您想要从响应HTML中捕获的确切html节点。

点击此处查看详细信息：x-ray

Answer 2

您可以使用DocumentFragment函数createDocumentFragment.

将收到的所有HTML添加到documentFragment，然后选择所需的HTML元素，就像从文档中选择一样，使用doucument.querySelector()表示您使用的片段fragment.querySelector()

DocumentFragments允许开发人员将子元素放置在类似任意节点的父节点上，从而允许类似节点的交互，而不需要真正的根节点。这样做可以让开发人员在可见DOM中不生成结构 - 速度的提高是真正的优势。

我会从收到的HTML开始，使用虚拟HTML并选择table.my-class并添加到自定义div，您可以根据需要对其进行修改。

＆＃13;

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);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
</div>

＆＃13;

如何从其他网站获取特定div内容

2 个答案: