代码之家 › 专栏 › 技术社区 › Rachel Dockter

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

xmlhttprequest html jquery javascript

Rachel Dockter · 技术社区 · 8 年前

我想从他们的网站到我的网站获取网站表内容。我得到了 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操作一切,这是一种有点黑客的方式,但我认为它会起作用。

最好的方法是什么?或者是一个我还没有提到的想法。

2 回复 | 直到 8 年前

surreal_sai 8 年前

不确定您的用例是否可以容纳服务器端代码,但可以解决此场景的一个非常好的节点包是x射线。

通过在服务器端这样做,您可以避免CORS问题,并且通过使用节点作为服务器,您仍然可以在JS中编写所有内容。

x-ray还提供了一个非常好的选项,如jquery,用于指向要从响应html中捕获的确切html节点。

查看此处了解详细信息: x-ray

Muhammad Omer Aslam 8 年前

您可以使用 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>