无需 XMLHttpRequest 即可获取 URL 的 HTML

Question

感谢您的阅读。我正在尝试提出一个 Javascript 函数，它将外部 URL 处的页面的 HTML 源代码转换为变量，以便整个内容变得可编辑。复杂的是，URL 并不是以“html、htm、aspx”扩展名结尾，而是以一串输入表单变量结尾（即？type=AAA&color=BBB...）。因此 XMLHttpRequest 方法是不可能的。

这在 JS/jQuery 中可行吗？我听说过同源策略，但以下工具设法做到了这一点，尽管是在 PHP 中： http:// /www.iwebtool.com/code_viewer

Answer 1

同源策略确实适用于这种情况，但是您可以通过服务器端代码 (PHP) 和 jQuery 的组合来实现。这是一个小例子。

PHP

<?php
    $url = $_REQUEST['url'];
    $curl_handle=curl_init();
    curl_setopt($curl_handle,CURLOPT_URL,$url);
    curl_setopt($curl_handle,CURLOPT_CONNECTTIMEOUT,2);
    curl_setopt($curl_handle,CURLOPT_RETURNTRANSFER,1);
    $buffer = curl_exec($curl_handle);
    curl_close($curl_handle);
    echo($buffer);
?>

jQuery / HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
  type: "POST",
  url: "yourPhpScript.php",
  data: "url=http://stackoverflow.com"
}).done(function( content ) {
  $('#content').html(content);
  //content is your variable containing the source
});
</script>

<div id="content"></div>

Answer 2

XMLHttpRequest 适用于任何有效的 url，只需为其提供适当的 url，您就可以获得文本形式的响应。

但是，存在同源策略的限制。对于不同的情况，有不同的解决方法，但如果您希望能够操纵收到的文本，那么实际上只有一个选择。使用与当前相同的 javascript，只需将其添加为 getUrl 的第一行：

url='/path/to/proxy.php?url='+encodeURIComponent(url);

然后，在您的服务器（为页面及其 javascript 提供服务的同一服务器）上，编写 proxy.php：

<?php
  echo file_get_contents($_GET['url']);
?>

这将使您发出的每个 ajax 请求转到您的服务器，该服务器没有仅从一个域加载的限制。服务器将加载您请求的 url，并用从加载的页面获得的响应回复您。请注意，上面的脚本只会为您提供内容正文（您在查看源代码时看到的内容） - 如果您需要访问 HTTP 标头，您也可以中继这些标头，但这会更加复杂。