Как загрузить таблицу с другой веб-страницы в массив?

Я создаю скрипт Greasemonkey/Tampermonkey, который помещает некоторую статистику в массив.

Используя JavaScript, как мне сделать так, чтобы страница загружала URL-адрес (футбол .fantasysports.yahoo.com/f1/326198/pointsagainst?pos=QB) в фоновом режиме и создает массив с первыми двумя столбцами (Rank и Team)?

Проблема, с которой я сталкиваюсь, заключается в том, что я делаю все это в фоновом режиме, я предполагаю, что буду использовать AJAX. Любая помощь будет оценена по достоинству.


person Bijan    schedule 01.09.2015    source источник
comment
Я не уверена. Скрипт будет запущен на сайте football.fantasysport.Yahoo.com.   -  person Bijan    schedule 01.09.2015
comment
Как я должен использовать php в скрипте Greasemonkey   -  person Bijan    schedule 01.09.2015
comment
Сотрите то, что я написал. Greasemonkey позволит вам настроить только свой собственный браузер без доступа CORS. Какова ваша цель?   -  person StackSlave    schedule 01.09.2015


Ответы (2)


Для статической страницы (например, тот, на который вы ссылаетесь), используйте GM_xmlhttpRequest() и DOMParser для извлечения нужных элементов. Смотри ниже.

Для динамической страницы(управляемой AJAX) используйте методы из Как получить AJAX-запрос на получение для ожидания страница, которую нужно отобразить перед возвратом ответа?


Вот полный скрипт, показывающий, как извлечь информацию со сторонней страницы и преобразовать ее в переменную массива:

// ==UserScript==
// @name        _Grab stuff of a *static*, third-party web site.
// @include     https://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://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);
}
person Brock Adams    schedule 01.09.2015
comment
Как бы я изменил это, чтобы получить несколько страниц одного типа и сохранить их в 2D-массиве. то есть прямо сейчас он получает позицию QB, но что, если я также хочу получить Эта страница и сохраните ее в массиве. В первом столбце массива будут перечислены все команды, во втором столбце будет указан рейтинг команд по позиции QB, в 3-м столбце будет указан рейтинг команд по позиции WR и так далее. - person Bijan; 01.09.2015
comment
Вы бы использовали отдельные GM_xmlhttpRequest для каждого типа таблицы (я бы сделал это функцией) и сопоставляли бы разные типы результатов по мере их поступления асинхронно. ... Это выходит за рамки этого вопроса, и если вы задаете новый вопрос для этого, убедитесь, что вы сначала приложили большие усилия для его решения. - person Brock Adams; 01.09.2015
comment
Я разместил новый вопрос. Моя идея заключалась в том, чтобы просто выполнить итерацию GM_xmlhttpRequest по циклу for, а затем объединить все массивы после этого, но это кажется неэффективным, и по какой-то причине console.log не работает. - person Bijan; 01.09.2015

Я думаю, вы хотите сделать что-то вроде:

// ==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
person StackSlave    schedule 01.09.2015
comment
У этого есть много проблем, самая большая из которых заключается в том, что он получает каждую ссылку на каждой просматриваемой странице! Пожалуйста, протестируйте свой код и никогда не используйте @include * или его эквивалент. - person Brock Adams; 01.09.2015