Как загрузить таблицу из другой веб-страницы в массив?
Я создаю сценарий Greasemonkey/Tampermonkey, который помещает некоторую статистику в массив.
Используя JavaScript, как бы я сделал так, чтобы страница загружала URL ( http://football.fantasysports.yahoo.com/f1/326198/pointsagainst?pos=QB&ntid=) в фоновом режиме и создавала массив с двумя первыми столбцами (Rank
а также Team
)?
Проблема, с которой я сталкиваюсь, заключается в том, чтобы делать все это в фоновом режиме, и я полагаю, что буду использовать AJAX. Любая помощь будет оценена.
2 ответа
Для статической страницы (например, той, на которую вы ссылались) используйте GM_xmlhttpRequest()
а также DOMParser
чтобы извлечь элементы, которые вы хотите. Увидеть ниже.
Для динамической страницы(управляемой AJAX) используйте приемы из Как получить запрос get AJAX, чтобы дождаться отображения страницы перед возвратом ответа?
Вот полный скрипт, показывающий, как извлечь информацию со сторонней страницы и превратить ее в переменную массива:
// ==UserScript==
// @name _Grab stuff of a *static*, third-party web site.
// @include https://stackru.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://football.fantasysports.yahoo.com/f1/326198/pointsagainst?pos=QB&ntid=",
onload: parseResponse,
onerror: function (e) { console.error ('**** error ', e); },
onabort: function (e) { console.error ('**** abort ', e); },
ontimeout: function (e) { console.error ('**** timeout ', e); }
} );
function parseResponse (response) {
var parser = new DOMParser ();
/* IMPORTANT!
1) For older browsers, see
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
for a work-around.
2) jQuery.parseHTML() and similar is bad because it causes images, etc., to be loaded.
*/
var ajaxDoc = parser.parseFromString (response.responseText, "text/html");
var statRows = ajaxDoc.querySelectorAll ("#statTable0 > tbody > tr");
var newStatTable = $(statRows).map ( function () {
var tblRow = $(this);
var teamRank = parseInt (tblRow.find (".rank-indicator").text().trim(), 10);
var teamName = tblRow.find ("td:eq(1)").text().trim();
return [ [teamRank, teamName] ];
} ).get ();
/*-- newStatTable, is a 2-D array like:
[ [1, "Team A"],
[2, "Team B"],
[3, "Team C"],
//etc...
]
*/
console.log (newStatTable);
//alert (newStatTable);
}
Я думаю, что вы хотите сделать что-то вроде:
// ==UserScript==
// @name Fantasy Stuff
// @namespace http://football.fantasysports.yahoo.com/f1/326198/pointsagainst?pos=QB&ntid=
// @description An example of Fantasy Stuff
// @include *
// ==/UserScript==
var doc = document;
function T(t){
return doc.getElementsByTagName(t);
}
var tms = T('tbody')[0].getElementsByTagName('a'), teams = [];
for(var i=0,n=1,l=tms.length; i<l; i++,n++){
teams[n] = tms[i].text;
}
// teams array should hold results
console.log(teams); // in FireFox