- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
用户可以将 URL 粘贴到我网站上的文本框中。当他们这样做时,我想通过 jQuery AJAX 获取该 URL 并从中读取 opengraph 元数据。我怎样才能做到这一点?
我读了这篇文章How to read Open Graph and meta tags from a webpage with a url但其中的链接已损坏,并且它比我需要的更高级,而不是在 jQuery 中:)
除了 opengraph 元数据之外,我不需要任何其他东西,因此不需要解析结构等。
所以我想提取的字段之一是 <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>
关于jquery - 如何通过Jquery获取页面打开图元数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29997121/
最终目标:我想要由 Git 跟踪的文件,但让这些文件对于所有分支都是相同的版本。如果您使用 gitignore 文件,则所有分支的文件都是相同的,但不幸的是不会被跟踪。当我跑 git push或类似的
我想从 PDF 文件中删除元数据。我已经尝试使用“exiftool”、“pdftk”和“qpdf”来删除元数据(建议的方法 - https://gist.github.com/hubgit/60783
AWS EC2 元数据从 EC2 提供了有关其自身的必要信息(废话!) - 是否有任何与 lambda 等效的信息。 我了解与 EC2 不同的 lambda 函数的 Multi-Tenancy 和短期
我正在使用 libavformat(即 C 库)将 MPEG4/H264 编码为 mp4 文件,我想在 MP4 文件中添加一些元数据,例如日期/时间。有人可以告诉我如何做到这一点吗? 谢谢。 最佳答案
有谁知道任何允许从 .jpg 图像中提取 java 元数据的类?或者可能是一些有用的代码? 谢谢! 最佳答案 我维护着一个库,正是这样做的。 https://github.com/drewnoakes
我尝试找出如何从媒体获取元数据有一段时间了,但到目前为止没有任何效果。我有类 Song,其中有 SimpleStringProperties,如标题、艺术家等。我尝试在类构造函数中为它们设置值: pr
我已经多次遇到这个问题,并且从不喜欢所选择的解决方案。假设您在数据库中有一个状态列表(作为一个简单的示例)。在您的代码隐藏中,您希望能够通过 ID 引用状态并通过 Intellisense 获得状态列
我在我的应用程序中使用 google 登录并从 google 获取用户个人资料信息。 我已经测试过,它在我这边工作正常,但苹果拒绝了它。我没有发现任何错误。 苹果拒绝原因:“Verify is you
我正在开发一个基于 MySQL 数据库的 Web 应用程序。我需要收集和分析使用情况和性能统计数据。统计数据将针对非技术人员。 如何实现此功能?您应该将我的问题视为编程问题,但如果您知道合适的工具或扩
我对如何保存表格行的元数据有疑问。 例如,我有一个表,其中包含有关图像 items_images 的数据。编号,整数(20)标题,VARCHAR(255)添加日期,DATETIME... 现在我想添加
我不明白为什么我必须在 list 中使用两个元数据元素才能开始运行我的 Google Maps API v2 项目。这些标签的用途是什么? 最佳答案 元数据是指有关数据的数据。 关于java -
如何获取 SharePoint 文档库中项目的内容类型列或元数据? 此链接提供了我不需要的文件属性 http://msdn.microsoft.com/en-us/library/microsoft.
我很确定这是可能的,只是不确定它的术语是什么以及如何去做。基本上,如果您右键单击任何文件并转到属性,然后转到摘要,您可以向文件添加评论等。 我想知道的是,您将如何从 C# 中有问题地执行此操作。此外,
在我的应用程序中,我正在从 Assets 库中检索 UIImage,该图像具有元数据。然后,该应用程序会调整图像大小并旋转图像,从而创建新图像。新图像没有预期的原始元数据,但如何在上传前将元数据添加回
Java 通过JDBC获得连接以后,得到一个Connection 对象,可以从这个对象获得有关数据库管理系统的各种信息,包括数据库中的各个表,表中的各个列,数据类型,触发器,存储过程等各方面的信息。
想知道是否有人知道扩展或配置 Breeze 以便服务器返回实体元数据中的附加信息的任何方法?我想使用这些附加数据来协助验证。 假设我有一个应用了一些数据注释的实体模型: public class Pe
我正在寻找将 MEF 用于我正在构建的应用程序的插件系统。我希望每个组件在(GUID)上都有一个我希望能够查找的标识符。但是,此 ID 在处理导出部件时也很有用。 有没有一种方法可以让我在导出的部分上
我对不完整的视频有疑问。例如上传失败的视频。如果您使用 ffmpeg -i 检查其元数据您将获得 1 小时的持续时间,但实际上只有 10mb 已上传到服务器,实际持续时间约为 7 分钟。查找这些视频
我在使用 FFmpeg 覆盖视频文件上的元数据时遇到了一些问题,这些文件之前已经添加了元数据(FFmpeg 也添加了以前的元数据)。 所以我使用ffmpeg -i path/to/video file
我有两个项目组想要加入: A B 使用常规连接会给我一个包含 4 个项目的集合: ServerA with Metadata A; ServerB with Metad
我是一名优秀的程序员,十分优秀!