如何通過jquery獲取頁面打開圖元數據

Question

用戶可以在我的網站上的文本框中粘貼一個URL。 當他們這樣做時，我想通過jQuery AJAX獲取該URL並從中讀取opengraph元數據。 我該怎麼做？

我看到這篇文章How to read Open Graph and meta tags from a webpage with a 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(/<--[\S\s]*?-->/g, ''); 
     // no noscript blocks 
     data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g, ''); 
     // no script blocks 
     data = data.replace(/<script[^>]*>[\S\s]*?<\/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價值？

Answer 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/