我想要的是,当你在URL_1,脚本解析URL_2全HTML网页在后台,以从中提取文本元素Greasemonkey的脚本。
具体而言,我想在后台下载整个页面的HTML代码( 烂番茄网站页面),并将其存储在一个变量,然后使用getElementsByClassName[0]
以提取与类名“的元素我想要的文字critic_consensus”。
我发现这MDN: HTML中的XMLHttpRequest所以,我结束了在这个不幸的是不工作的代码:
var xhr = new XMLHttpRequest();
xhr.onload = function() {
alert(this.responseXML.getElementsByClassName(critic_consensus)[0].innerHTML);
}
xhr.open("GET", "http://www.rottentomatoes.com/m/godfather/",true);
xhr.responseType = "document";
xhr.send();
这表明,当我在Firefox便签运行此错误消息:
跨来源请求阻止:同源策略不允许在读远程资源http://www.rottentomatoes.com/m/godfather/ 。 这可以通过将资源移动到相同域或启用CORS被固定。
PS。 为什么我不使用烂番茄API的原因是, 他们已经删除了其中的评论家的共识 。
对于跨域请求,其中所获取的网站还没有有益设定许可CORS政策 ,Greasemonkey的提供了GM_xmlhttpRequest()
函数 。 (大多数其他userscript引擎也提供这种功能。)
GM_xmlhttpRequest
明确设计为允许跨域请求。
为了让您的目标信息创建DOMParser
上的结果。 不要使用jQuery方法,因为这会导致多余的图片,脚本和对象加载,速度变慢或崩溃的页面。
下面是说明了处理一个完整的脚本 :
// ==UserScript==
// @name _Parse Ajax Response for specific nodes
// @include http://stackoverflow.com/questions/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant GM_xmlhttpRequest
// ==/UserScript==
GM_xmlhttpRequest ( {
method: "GET",
url: "http://www.rottentomatoes.com/m/godfather/",
onload: function (response) {
var parser = new DOMParser ();
/* IMPORTANT!
1) For Chrome, see
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#DOMParser_HTML_extension_for_other_browsers
for a work-around.
2) jQuery.parseHTML() and similar are bad because it causes images, etc., to be loaded.
*/
var doc = parser.parseFromString (response.responseText, "text/html");
var criticTxt = doc.getElementsByClassName ("critic_consensus")[0].textContent;
$("body").prepend ('<h1>' + criticTxt + '</h1>');
},
onerror: function (e) {
console.error ('**** error ', e);
},
onabort: function (e) {
console.error ('**** abort ', e);
},
ontimeout: function (e) {
console.error ('**** timeout ', e);
}
} );
问题是:XMLHttpRequest的无法加载http://www.rottentomatoes.com/m/godfather/ 。 没有“访问控制允许来源”标头出现在所请求的资源。
因为你不是资源的所有者,你不能设置此头。
你可以做的是建立一个代理在Heroku上,将代理烂番茄网站下面的所有请求是一个小的node.js代理https://gist.github.com/igorbarinov/a970cdaf5fc9451f8d34
var https = require('https'),
http = require('http'),
util = require('util'),
path = require('path'),
fs = require('fs'),
colors = require('colors'),
url = require('url'),
httpProxy = require('http-proxy'),
dotenv = require('dotenv');
dotenv.load();
var proxy = httpProxy.createProxyServer({});
var host = "www.rottentomatoes.com";
var port = Number(process.env.PORT || 5000);
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
var server = require('http').createServer(function(req, res) {
// You can define here your custom logic to handle the request
// and then proxy the request.
var path = url.parse(req.url, true).path;
req.headers.host = host;
res.setHeader("Access-Control-Allow-Origin", "*");
proxy.web(req, res, {
target: "http://"+host+path,
});
}).listen(port);
proxy.on('proxyRes', function (res) {
console.log('RAW Response from the target', JSON.stringify(res.headers, true, 2));
});
util.puts('Proxying to '+ host +'. Server'.blue + ' started '.green.bold + 'on port '.blue + port);
我修改https://github.com/massive/firebase-proxy/代码这个
我发表代理http://peaceful-cove-8072.herokuapp.com/和http://peaceful-cove-8072.herokuapp.com/m/godfather可对其进行测试
这里是一个要点,以测试http://jsfiddle.net/uuw8nryy/
var xhr = new XMLHttpRequest();
xhr.onload = function() {
alert(this.responseXML.getElementsByClassName(critic_consensus)[0]);
}
xhr.open("GET", "http://peaceful-cove-8072.herokuapp.com/m/godfather",true);
xhr.responseType = "document";
xhr.send();
JavaScript的同源策略阻止您访问属于不同的域的内容。
以上引用也为您提供了四种技术放宽这一规则(CORS是其中之一)。
文章来源: How to use XMLHttpRequest to download an HTML page in the background and extract a text element from it?