Как получить метаданные открытого графика страницы через Jquery
Пользователи могут вставить URL-адрес в текстовое поле на моем сайте. Когда они это сделают, я хочу получить этот URL-адрес через jQuery AJAX и прочитать метаданные opengraph из него. Как я могу это сделать?
Я прочитал этот пост Как читать открытый Граф и мета-теги с веб-страницы с url но ссылка в нем сломана, и он более продвинутый, чем мне нужно, а не в jQuery:)
Мне не нужно ничего, кроме метаданных opengraph, поэтому никакого разбора структур и т. д.
Вот пример страницы: http://www.ebay.com/itm/Microsoft-Surface-Pro-3-12-Tablet-256GB-SSD-Intel-Core-i7-Haswell-8GB-RAM-/281656969697
Итак, одно из полей, которое я хотел бы извлечь, - это <meta  property="og:image" content="http://i.ebayimg.com/images/i/281656969697-0-1/s-l1000.jpg" ></meta>, а точнее значение http://i.ebayimg.com/images/i/281656969697-0-1/s-l1000.jpg 
То, что у меня сейчас есть, скопировано отсюда: http://icant.co.uk/articles/crossdomain-ajax-with-jquery/error-handling.html
Смотрите мой комментарий, помеченный @Flo, где я хочу извлечь данные открытого графика, но я не знаю, как разобрать JSON ответ.
<a href="www.ebay.com/itm/Microsoft-Surface-Pro-3-12-Tablet-256GB-SSD-Intel-Core-i7-Haswell-8GB-RAM-/281656969697" class="ajaxtrigger">Load Ajax Content</a>
<div id="target"></div>
    <script language="javascript" type="text/javascript">
    $(function () {
        $('.ajaxtrigger').click(function () {
            var container = $('#target');
            container.attr('tabIndex', '-1');
            var trigger = $(this);
            var url = trigger.attr('href');
            if (!trigger.hasClass('loaded')) {
                trigger.append('<span></span>');
                trigger.addClass('loaded');
                var msg = trigger.find('span').last();
            } else {
                var msg = trigger.find('span').last();
            }
            doAjax(url, msg, container);
            return false;
        });
    });
    function doAjax(url, msg, container) {
        // if the URL starts with http
        if (url.match('^http')) {
            // assemble the YQL call
            msg.removeClass('error');
            msg.html(' (loading...)');
            $.getJSON("//query.yahooapis.com/v1/public/yql?" +
                      "q=SELECT%20*%20FROM%20html%20WHERE%20url=%27" +
                      encodeURIComponent(url) +
                      "%27%20AND%20xpath=%27descendant-or-self::meta%27&format=json&callback=?",
              function (data) {
                  if (data.results[0]) {
                      var data = filterData(data.results[0]);
                      //@Flo: get metadata from result, but now???
                      msg.html(' (ready.)');
                      container.
                        html(data).
                          focus().
                            effect("highlight", {}, 1000);
                  } else {
                      msg.html(' (error!)');
                      msg.addClass('error');
                      var errormsg = '<p>Error: could not load the page.</p>';
                      container.
                        html(errormsg).
                          focus().
                            effect('highlight', { color: '#c00' }, 1000);
                  }
              }
            );
        } else {
            $.ajax({
                url: url,
                timeout: 5000,
                success: function (data) {
                    msg.html(' (ready.)');
                    container.
                      html(data).
                        focus().
                          effect("highlight", {}, 1000);
                },
                error: function (req, error) {
                    msg.html(' (error!)');
                    msg.addClass('error');
                    if (error === 'error') { error = req.statusText; }
                    var errormsg = 'There was a communication error: ' + error;
                    container.
                      html(errormsg).
                        focus().
                          effect('highlight', { color: '#c00' }, 1000);
                },
                beforeSend: function (data) {
                    msg.removeClass('error');
                    msg.html(' (loading...)');
                }
            });
        }
    }
    function filterData(data) {
        // filter all the nasties out
        // no body tags
        data = data.replace(/<?/body[^>]*>/g, '');
        // no linebreaks
        data = data.replace(/[r|n]+/g, '');
        // no comments
        data = data.replace(/<--[Ss]*?-->/g, '');
        // no noscript blocks
        data = data.replace(/<noscript[^>]*>[Ss]*?</noscript>/g, '');
        // no script blocks
        data = data.replace(/<script[^>]*>[Ss]*?</script>/g, '');
        // no self closing scripts
        data = data.replace(/<script.*/>/, '');
        // [... add as needed ...]
        return data;
    }
    </script>
Объект, возвращаемый этим запросом:
Object {query: Object}
query: Object
count: 33
created: "2015-05-02T04:36:46Z"
lang: "en-US"
results: Object
meta: Array[33]
0: Object
name: "viewport"
__proto__: Object
1: Object
content: "main"
name: "layout"
__proto__: Object
Как я могу отфильтровать этот ответ, чтобы вернуть значение og:image?
1 ответ:
Обновлено
Попробуйте
var url = "http://www.ebay.com/itm/Microsoft-Surface-Pro-3-12-" + "Tablet-256GB-SSD-Intel-Core-i7-Haswell-8GB-RAM-/281656969697"; $.getJSON("//query.yahooapis.com/v1/public/yql?" + "q=SELECT%20*%20FROM%20html%20WHERE%20url=%27" + encodeURIComponent(url) + "%27%20AND%20xpath=%27descendant-or-self::meta%27" + "&format=json&callback=?" , function(data) { // `data`:`json` returned from request console.log(data); // filter returned `results.meta` array for // object having property `property`:`og:*` `meta` elements ; // and has `property` `og:image` var res = $.grep(data.query.results.meta, function(image, key) { return image.hasOwnProperty("property") && image.property === "og:image" }); // if object having property `og:image` returned , do stuff if (res.length > 0) { console.log(res[0].property); $("body").append(res[0].content); } else { // else, log notification console.log("og:image not found") }; });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>Jsfiddle http://jsfiddle.net/v47mc1ht/2/