0

有没有办法使用 javascript 解析 html 内容？

我需要在我的网站中仅显示来自其他网站的 div。那可能吗？例如，考虑我只想在我的网站中显示div#leftcolumnof 。w3schools.com这甚至可能吗？

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

谢谢。

4

5 回答 5

3

您需要查看Same Origin Policy：

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

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

相同的协议和主机

您需要实现JSONP来解决它。

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

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

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

1）创建一个名为的php页面ajax.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文件路径
  • 您allow_url_fopen已从 php.ini 打开。
  • 您替换yourDiv为id要放入接收到的内容的元素
于 2012-07-04T18:27:24.350 回答
2

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

于 2012-07-04T18:26:09.167 回答
0

我能想到的：

<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”请求都受同源策略的约束；请求无法从不同的域、子域或协议成功检索数据。

那么为什么不在您的域中创建一个代理，然后使用代理的输出呢？！嘿，这是冗长的 - 真的......但它有效:)

于 2012-07-04T18:26:16.113 回答
0

您需要创建一个 Web 服务来拉入代码。这是因为由于安全限制，您无法通过 JavaScript 拉入数据。这被称为同源政策，并在此页面的其他地方链接。

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

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

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

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

并像查询任何普通的 jquery 元素一样查询它。

于 2012-07-04T18:32:22.240 回答
0

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

获取内容.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");
});
于 2012-07-04T18:33:52.647 回答