如何使用 JavaScript 从元标记中获取信息?

IT技术 javascript html greasemonkey meta-tags
2021-02-07 22:01:48

我需要的信息在元标记中。我怎样才能在什么时候访问"content"元标记数据property="video"

HTML:

<meta property="video" content="http://video.com/video33353.mp4" />
6个回答

其他答案可能可以解决问题,但这个答案更简单,不需要 jQuery:

document.head.querySelector("[property~=video][content]").content;

原始问题使用带有属性RDFa标记property=""对于普通的 HTML<meta name="" …>标签,您可以使用以下内容:

document.querySelector('meta[name="description"]').content
简单、优雅且没有依赖性。比接受的答案更好
2021-03-13 22:01:48
好的。“[内容]”部分的目的是什么?没有它,我也得到了元元素。
2021-03-22 22:01:48
为了让它与OG标签一起工作,像这样添加引号_: var title = document.head.querySelector('[property="og:title"]');
2021-04-02 22:01:48
@citykid 这似乎有点多余。如果标签未通过其“属性”找到,该代码段将始终抛出 TypeError。包含[content]在选择器中将该例外扩展到任何匹配标签缺少内容属性的情况。IMO 在这种情况下获得空结果更有意义,但我猜这取决于实施者的偏好。
2021-04-04 22:01:48
即使我的元数据在 <head> 标签中,也document.head.querySelector给了我nulldocument.querySelector工作得很好
2021-04-10 22:01:48

你可以使用这个:

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

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

  return '';
}

console.log(getMeta('video'));
您真正想要的是“让”保持它们在本地定义;)
2021-03-14 22:01:48
如果您可以使用 querySelector,则可以执行以下操作: document.querySelector("meta[property='og:url']").getAttribute('content')
2021-03-18 22:01:48
跳过这个答案。它在 OP 的 [不可否认的奇怪] 情况下不起作用,因为它查看“名称”而不是“属性”属性。在目前的状态下,它过于复杂,但没有任何向后兼容性优势——任何支持const/let应该支持的浏览器.querySelector
2021-03-29 22:01:48
我认为这个答案不是更相关,你真的应该使用stackoverflow.com/questions/7524585/...
2021-04-07 22:01:48
只有一个元属性,为什么要循环多次?它可能有数百个元标记,或者可能需要多次获取元值。
2021-04-08 22:01:48

一个班轮在这里

document.querySelector("meta[property='og:image']").getAttribute("content");

有一个更简单的方法:

document.getElementsByName('name of metatag')[0].getAttribute('content')
这至少适用于 IE11,这使它更有用。
2021-03-13 22:01:48
document.querySelector版本一直工作到 IE8,所以它足够了
2021-03-18 22:01:48
这通常是一个很好的方法,但请注意,OP 使用的是 RDFa“属性”属性而不是更基本的“名称”属性(stackoverflow.com/questions/22350105/...
2021-03-21 22:01:48
function getMetaContentByName(name,content){
   var content = (content==null)?'content':content;
   return document.querySelector("meta[name='"+name+"']").getAttribute(content);
}

以这种方式使用:

getMetaContentByName("video");

此页面上的示例:

getMetaContentByName("twitter:domain");
我使用了这个花絮,但在某个页面上得到了一个type errorasundefined因为元标记本身丢失了。我通过分配一个变量并将其包装document.queryselector在 try 语句中解决了这个问题,这样我就可以""在出现错误时默认获取
2021-03-20 22:01:48
function getMetaContentByName(name,content){ var content = (content==null)?'content':content; try{ return document.querySelector("meta[name='"+name+"']").getAttribute(content); }catch{ 返回空值;} }
2021-03-25 22:01:48