gpt4 book ai didi

jquery - 如何通过Jquery获取页面打开图元数据

转载 作者:行者123 更新时间:2023-12-03 22:50:15 26 4
gpt4 key购买 nike

用户可以将 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值?

最佳答案

尝试

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

关于jquery - 如何通过Jquery获取页面打开图元数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29997121/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com