JavaScript 获取页面中的 Meta 信息

今天浏览摄影图片网站500px ,发现一些漂亮的图片,想要下载下来。记得该网站是提供下载链接的,现如今我找半天也没找着。于是我谷歌搜索了一下,在Quora上找到:How to download photos from 500px – Quora

其中点赞最多的答案是 500px.com 会把图片的链接放页面头部的 meta 标签中,其属性为: og:image。如:

<meta content=’https://drscdn.500px.org/photo/1002989457/q%3D80_m%3D2000_k%3D1/v2?sig=e945f428e48181aec1cd624544e554945aa82cc39ae75f00396e1a3a0913d5b3′ property=’og:image’>


meta标签是HTML语言HEAD区的一个辅助性标签。

meta常用于定义页面的说明,关键字,最后修改日期,和其它的元数据。这些元数据将服务于浏览器(如何布局或重载页面),搜索引擎和其它网络服务。

Meta Property=og标签是什么呢?

og是一种新的HTTP头部标记,即Open Graph Protocol:

The Open Graph Protocol enables any web page to become a rich object in a social graph.

即这种协议可以让网页成为一个“富媒体对象”。

用了Meta Property=og标签,就是你同意了网页内容可以被其他社会化网站引用等,目前这种协议被SNS网站如Fackbook、renren采用。

SNS已经成为网络上的一大热门应用,优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率,2010年F8会议上Facebook公布了一套开放内容协议(Open Graph Protocol),任何网页只要遵守该协议,SNS就能从页面上提取最有效的信息并呈现给用户。


JavaScript 访问 Meta 信息

于是我就写了个油猴脚本,在500px网站上增加一个按钮,通过JS找到图片地址,点击按钮把图片下载下来。

其核心代码非常简单:

document.head.querySelector(“[property~=’og:image’][content]”).content

也可以整理成函数:

function getMeta(metaName) {
const metas = document.getElementsByTagName(‘meta’);

for (let i = 0; i < metas.length; i++) {
if (metas[i].getAttribute(‘property’) === metaName) {
return metas[i].getAttribute(‘content’);
}
}

return ”;
}

console.log(getMeta(‘og:image’));


参考资料

kbc C87 机械键盘 有线键盘 游戏键盘 87键 原厂cherry轴

关注微信公众号

码中人 微信公众号