在 ajax 或 jquery 中读取外部网页的源代码（没有 yql+JSON / 没有 php / 没有 iframe）答案

【问题标题】：read source of EXTERNAL webpage in ajax or jquery (no yql+JSON / no php / no iframe)在 ajax 或 jquery 中读取外部网页的源代码（没有 yql+JSON / 没有 php / 没有 iframe）
【发布时间】：2024-01-20 17:14:01
【问题描述】：

我想用 ajax 或 jquery 阅读 www.google.com 的 html 源代码（我不只是想显示源代码，我需要解析它，所以有 xmlhttp.responseText 很好）。

read contents of an external webpage and get specific elements 有一个很好的方式在服务器端使用 php Can Javascript read the source of any web page? 很好，如果你想读取本地域的页面

yql+JSON 是一种可能，如上所述，但看起来很慢且开销很大

我更喜欢 ajax，因为我不需要加载 90k 的 jquery 库，而且据我所知......

var xmlhttp=null;
var url = 'bot.html?url=http://google.com';  //must redirect in bot.html
//var url='http://www.google.com';  wont work, 0 xmlhttp.status error
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();  //src says buggy for IE7
} else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.open("GET",url,true);
xmlhttp.send(null);

xmlhttp.onreadystatechange=function() {
 if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("result").innerHTML= xmlhttp.responseText;
 }
}

和jquery差不多...

$("#result").load(url);

在其他提到的 * 中未提及的是如何处理 ?url= 。我做了（保留所有 js）...

bot.html:
<head>
<script type="text/javascript">
var vars = query.split("&"); 
var pair = vars[0].split("=");
if (pair[0]=='url') {  // ex bot.html?url=http://www.google.com
    alert('hi '+pair[1]);
    window.location = pair[1];
    //top.location.href=pair[1];  or
}
</script>
... above jquery or ajax ...
<div id="result">Fill Me</div>

所有这些都适用于本地页面 var url='index.php' （没有重定向），但是，这些都不适用于外部链接，如 google.com，我似乎无法 var url='google 。因为它正在加载，而不是在做。我想我可以对 ajax 使用相同的代理技巧。

尝试通过 .htaccess 重定向/代理不适合此应用程序

【问题讨论】：

标签： ajax proxy jquery-load http-redirect

【解决方案1】：

我看不出你想用问题中的第二段代码来完成什么（从bot.html 向下）。

但是！我想我有一个解决方案给你。您可能遇到了同源策略（Wikipedia 或 MDN 文档），该策略基本上指出 XMLHttpObjects 不能向它们最初提供服务的域以外的域发出请求。这背后的想法是，如果在浏览器级别（换句话说，在比 JS 运行时本身更高的权限）没有这样的强制执行，外部脚本很容易通过更改请求的域或参数。

解决方法是改用脚本标签。这是我从jQuery source 改编的一些代码（搜索“DOMContentLoaded”以获取相关部分）来做到这一点。我也不想包含整个 jQuery 库来发出跨域 Ajax 请求 - 我们正在测试客户端操作的速度，并且一些测试目标已经不需要 jQuery，因此包含它会扭曲测试.

function saveTime() {
    var s = document.createElement("script"), h = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
    s.async = "async";
    s.type = "text/javascript";
    s.onreadystatechange = function(result) {
        // callback function
        // Append the result into the inner HTML here
    };
    s.src = url;
    h.insertBefore(s, h.firstChild);
}

这应该可以满足您的需求，但您可能需要调整 type 属性以获取原始/完整的 HTML 内容。它将带有url 中指定的源的<script> 标记附加到<head> 标记（或正文，对于非常旧的IE 版本）的开头。我没有调整清理代码。如果您查看 jQuery 源代码，您会发现它们实际上有额外的处理程序，用于在请求完成或失败后从 DOM 中删除标记。

【讨论】：

我试过这个... var url = 'google.com';和 s.type = "text/html";并删除了函数 saveTime() 以只做内脏，并在 onreadystatechange 函数中发出警报。永远看不到警报。我做错了什么？
我自己玩了一下。 Chrome 似乎不会使用type="text/html" 动态加载脚本元素，如果您使用type="text/javascript"，那么当浏览器针对返回的 html 运行 Javascript 解释器时会出现语法错误。我想知道 YQL 的胆量是如何工作的......
哦，我真傻。 YQL 通过查询他们的服务器端 API 来运行。我假设它是一个发布的 JS 库，你可以从浏览器中独立运行。
我一直在阅读。如果没有 php 或 yql（正如你所说的与他们的服务器握手），我似乎无法做到这一点。我可以 iframe 一个外部页面（并间接获取所有代码）是没有意义的。
也许这就是你的答案。 iFrame在内容中设置了display:none的css规则，使用JS检测何时加载完成，然后获取iFrame的内部html。（也是理论上的，我没试过。）