如何使用javascript或jQuery解析html内容

Question

有没有一种方法可以使用javascript解析html内容？

我需要只显示其他网站的div到我的网站。 那可能吗？ 例如， div#leftcolumn我只想在我的网站上显示w3schools.com div#leftcolumn 。 这有可能吗？

如何使用javascript或jQuery做同样的事情？

谢谢。

Answer 1

您需要看一下同源起源政策 ：

在计算中，对于许多浏览器端编程语言（例如JavaScript），相同的源策略是重要的安全概念。 该策略允许在源自同一站点的页面上运行的脚本不受特定限制地访问彼此的方法和属性，但可以阻止跨不同站点的页面访问大多数方法和属性。

为了使您能够获取数据，它必须是：

相同的协议和主机

您需要实现JSONP来解决它。

---

尽管在相同的协议和主机上，jQuery具有load()函数，您可以像这样使用：

$('#foo').load('somepage.html div#leftcolumn', function(){
  // loaded
}); 

---

另一种可能的解决方案（未经测试）是使用服务器端语言，并且您不需要jsonp 。 这是PHP的示例。

1）创建一个名为ajax.php的php页面，并将以下代码放入其中：

<?php
  $content = file_get_contents("http://w3schools.com");
  echo $content ? $content : '0'; 
?>

2）在某些页面上，输入以下代码：

$('#yourDiv').load('ajax.php div#leftcolumn', function(data){
    if (data !== '0') { /* loaded */ }
}); 

确保：

• 您指定ajax.php文件的正确路径
• 您已经从php.ini中启用了allow_url_fopen 。
• 您将yourDiv替换为您想要将接收到的内容放入其中的元素id

Answer 2

您将需要使用HTTPRequest抓取HTML内容，然后可以抓取希望在页面中显示的HTML内容。 您可能需要了解某种服务器端语言，不幸的是，由于浏览器的安全性限制，Ajax / jQuery对此不起作用，大多数“ Ajax”请求都受相同的原始策略约束； 该请求无法成功从其他域，子域或协议检索数据。

Answer 3

我能想到的是：

<div style="hidden" id="container"></div>

然后做某事（快捷方式@ https://stackoverflow.com/a/11333936/57508 ）

var $container = $('#container');
$container.load('someurl-on-your-domain');
var $leftcolumn = $('div#leftcolumn', $container);
$leftcolumn.appendTo($sthother);

根据评论：是的，的确有一项同源政策（ http://api.jquery.com/load/ ）：

由于浏览器安全性的限制，大多数“ Ajax”请求都受相同的原始策略限制； 该请求无法成功从其他域，子域或协议检索数据。

那么，为什么不创建一个在您的域中的代理，然后使用代理的输出呢？ 嘿，这是漫长的-是的...但是可以用:)

Answer 4

您需要制作一个Web服务来提取代码。这是因为由于安全限制，您无法通过JavaScript提取数据。 这被称为同一来源策略，并在此页面的其他位置链接。

如果您正在使用asp.net技术，则可以在服务器端使用HtmlAgilityPack进行解析。

• 如何使用HTML Agility Pack

然后，您可以使用.load()从jQuery调用数据：

• http://api.jquery.com/load/

想法是将其加载到隐藏的div中，例如：

$("#result").load("/webservice/pulldata.ashx");

并像查询任何普通jquery元素一样进行查询。

Answer 5

如果要绕过XSS保护，则可以编写自己的服务器请求并从中获取信息。 范例（php）：

getContent.php

<? $fileContent = file_get_content("http://w3schools.com");
   echo $fileContent; ?>

然后，您可以使用任何想要修改此内容的内容（甚至在回显之前）。

客户端脚本示例：

<div id="resultHtml"></div>
<script type="text/javascript">
$(document).ready(function(){
    $("#resultHtml").load("getFilecontent.php");
});