今天浏览摄影图片网站 https://web.500px.com/ , 发现一些漂亮的图片, 想要下载下来. 记得该网站是提供下载链接的, 现如今我找半天也没找着. 于是我谷歌搜索了一下, 在 Quora 上找到: How to download photos from 500px - Quora.
其中点赞最多的答案是 500px.com 会把图片的链接放页面头部的 meta 标签中, 其属性为: og:image. 如:
<meta content='https://drscdn.500px.org/photo/1002989457/q=80_m=2000_k=1/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'));
参考资料
HTML - How do I get the information from a meta tag with JavaScript? - Stack Overflow
为什么要使用 HTML 的 meta 标签 - IamV - 博客园
meta property=og 标签含义及作用 转 - Maud 未来 - 博客园
来源: http://www.mzh.ren/get-the-information-from-a-meta-tag-with-javascript.html