如何通过jQuery让页面打开图元数据 [英] How to get page open graph metadata via Jquery
问题描述
用户可以在我的网站上的文本框粘贴URL。 当他们这样做，我想通过jQuery的AJAX的网址，并从中读取opengraph元数据。 我怎样才能做到这一点？
我看到这篇文章<一个href="http://stackoverflow.com/questions/16750127/how-to-read-open-graph-and-meta-tags-from-a-webpage-with-a-url">How阅读开放图谱和meta标签从网页的URL 但其中的链接被破坏，这是更先进的比我需要的，而不是在jQuery的：）
我不需要任何东西，但opengraph元数据，所以没有解析结构等。
下面是一个页面的一个例子：<一href="http://www.ebay.com/itm/Microsoft-Surface-Pro-3-12-Tablet-256GB-SSD-Intel-Core-i7-Haswell-8GB-RAM-/281656969697" rel="nofollow">http://www.ebay.com/itm/Microsoft-Surface-Pro-3-12-Tablet-256GB-SSD-Intel-Core-i7-Haswell-8GB-RAM-/281656969697
所以我想提取的一个字段是＆LT;元属性=OG：形象CONTENT =http://i.ebayimg.com/images/i/281656969697- 0-1 / S-l1000.jpg＆GT;＆LT; /元＆GT; ，以precise值 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响应。
＆LT;一href="www.ebay.com/itm/Microsoft-Surface-Pro-3-12-Tablet-256GB-SSD-Intel-Core-i7-Haswell-8GB-RAM-/281656969697"类=ajaxtrigger＆GT;加载的Ajax内容和LT; / A＆GT;
＆LT; DIV ID =目标＆GT;＆LT; / DIV＆GT;
＆LT; SCRIPT LANGUAGE =JavaScript的类型=文/ JavaScript的＆GT;
$（函数（）{
$（'。ajaxtrigger）。点击（函数（）{
VAR容器= $（'＃目标'）;
container.attr（'的tabIndex'，'-1'）;
VAR触发= $（本）;
VAR URL = trigger.attr（HREF'）;
如果（！trigger.hasClass（'加载'））{
trigger.append（'＆LT;跨度＆GT;＆LT; / SPAN＆GT;'）;
trigger.addClass（'加载'）;
。VAR味精= trigger.find（'跨'）去年（）;
} 其他 {
。VAR味精= trigger.find（'跨'）去年（）;
}
doAjax（URL，味精，容器）;
返回false;
}）;
}）;
功能doAjax（URL，味精，集装箱）{
//如果URL以http开头
如果（url.match（'^的http'））{
//组装YQL调用
msg.removeClass（'错误'）;
msg.html（（载入中...）'）;
$ .getJSON（// query.yahooapis.com/v1/public/yql？+
Q = SELECT％20 *％20FROM％20html％20WHERE％20url = 27％+
EN codeURIComponent（URL）+
％27％20AND％20xpath =％27descendant或自身::元％27＆安培;格式= JSON＆安培;回调=，
功能（数据）{
如果（data.results [0]）{
VAR数据=筛选数据（data.results [0]）;
// @弗洛：从结果得到的元数据，但现在???
msg.html（'（准备好）。）;
容器。
的HTML（数据）。
焦点（）。
效果（亮点，{}，1000）;
} 其他 {
msg.html（'（错误）！'）;
msg.addClass（'错误'）;
VAR ERRORMSG ='＆LT; P＆GT;错误：无法加载网页＆LT; / P＆GT;';
容器。
HTML（ERRORMSG）。
焦点（）。
效果（'亮点'，{色：＃C00}，1000）;
}
}
）;
} 其他 {
$阿贾克斯（{
网址：网址，
超时：5000，
成功：功能（数据）{
msg.html（'（准备好）。）;
容器。
的HTML（数据）。
焦点（）。
效果（亮点，{}，1000）;
}，
错误：函数（REQ，错误）{
msg.html（'（错误）！'）;
msg.addClass（'错误'）;
如果（错误==='错误'）{错误= req.statusText; }
VAR ERRORMSG ='有一个通讯错误：'+错误;
容器。
HTML（ERRORMSG）。
焦点（）。
效果（'亮点'，{色：＃C00}，1000）;
}，
beforeSend：功能（数据）{
msg.removeClass（'错误'）;
msg.html（（载入中...）'）;
}
}）;
}
}
功能筛选数据（数据）{
//过滤所有的脏东西出来
//没有身体标签
数据= data.replace（/＆LT; \ /体[^＆GT;] * /克，''）;
//没有换行符
数据= data.replace（/ [\ r | \ N] + /克，''）;
// 没意见
数据= data.replace（/＆所述; - [\ s \ S] * - ＆/克，''）;
//无无脚本块
数据= data.replace（/＆LT; NOSCRIPT [^＆GT;] *＆GT;？[\ S \ S] *＆LT; \ / NOSCRIPT＆/克，''）;
//没有脚本块
数据= data.replace（/＆LT;脚本[^＆GT;] *＆GT; [\ S \ S] *＆LT; \ / SCRIPT＆/克，''）;
//没有自动关闭脚本
数据= data.replace（/＆所述;脚本* \ /＆GT; /，''）;
// [...根据需要添加...]
返回的数据;
}
＆LT; / SCRIPT＆GT;
此查询返回的对象是：
对象{查询：对象}
查询：对象
数：33
创建：2015-05-02T04：36：46Z
郎咸平：EN-US
结果：对象
元：数组[33]
0：对象
名称：视口
__proto__：对象
1：对象
内容：主
名称：布局
__proto__：对象
如何过滤这个响应返回 OG：图片值
更新
尝试
VAR URL =http://www.ebay.com/itm/Microsoft - 表面-PRO-3-12-
+平板-256GB-SSD，英特尔睿i7处理器的Haswell-8GB-RAM- / 281656969697;
$ .getJSON（// query.yahooapis.com/v1/public/yql？
+Q =选择20％*％20FROM％20html％20WHERE％20url = 27％
EN + codeURIComponent（URL）
+％27％20AND％20xpath =％27descendant或自身::元％27
+＆放大器;格式= JSON和放大器;回调=？
，功能（数据）{
//`data`：`json`从请求返回
的console.log（数据）;
//过滤器返回`results.meta`阵列
//为属性对象`property`：`OG：*``meta`元素;
//并拥有``property` OG：image`
VAR解析度= $ .grep（data.query.results.meta，功能（图像，键）{
返回image.hasOwnProperty（物业）及和放大器; image.property ===OG：形象
}）;
//如果有属性`对象OG：image`回来，做的东西
如果（res.length大于0）{
的console.log（RES [0] .property）;
$（机构）追加（RES [0] .content）。
} 其他 {
//否则，登录通知
的console.log（OG：没有找到图片）
};
}）;
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/1.11.1/jquery.min.js">
＆LT; / SCRIPT＆GT;
Users can paste an URL in a textbox on my site. When they do, I want to get that URL via jQuery AJAX and read the opengraph metadata from it. How can I do this?
I read this post How to read Open Graph and meta tags from a webpage with a url but the link in it is broken and it's more advanced than I need and not in jQuery :)
I don't need anything else but the opengraph metadata, so no parsing of structures etc.
Here's an example of a page: http://www.ebay.com/itm/Microsoft-Surface-Pro-3-12-Tablet-256GB-SSD-Intel-Core-i7-Haswell-8GB-RAM-/281656969697
So one of the fields I'd like to extract is <meta property="og:image" content="http://i.ebayimg.com/images/i/281656969697-0-1/s-l1000.jpg" ></meta>, to be precise the value http://i.ebayimg.com/images/i/281656969697-0-1/s-l1000.jpg
What I have now is copied from here: http://icant.co.uk/articles/crossdomain-ajax-with-jquery/error-handling.html
See my comment marked @Flo where I want to extract the open graph data, but I don't know how to parse the JSON response.
<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>
The object returned by this query is:
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
How can I filter this response to return the og:image value?
Updated
Try
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/
这篇关于如何通过jQuery让页面打开图元数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
