如何使用JavaScript从meta标签获取信息?


136

我需要的信息在meta标签中。"content"何时可以访问meta标签的数据property="video"

HTML:

<meta property="video" content="http://video.com/video33353.mp4" />

2
请注意,<meta>name属性应该具有,而不是property。使用standard属性的开发人员将需要调整大多数答案给出的代码。
延斯·班曼

Answers:


128

您可以使用此:

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'));

6
您真正想要的是“保留”以使其在本地定义;)
Tommed to

22
如果可以使用querySelector,则可以执行以下操作: document.querySelector("meta[property='og:url']").getAttribute('content')
Nishchal Gautam

3
我想这个答案是不相关的,你应该使用stackoverflow.com/questions/7524585/...
谢尔盖Basharov

跳过此答案。由于它查看的是“名称”属性,而不是“属性”属性,因此在OP的[公认的奇怪]情况下不起作用。并且在当前状态下,它过于复杂,但是没有向后兼容性的优势-任何支持const/ let应该支持的浏览器.querySelector
natevw

对于仅一个meta属性,为什么要循环多次?它可能具有数百个meta标签,或者可能需要多次获取meta值。
SKR

212

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

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

最初的问题使用带有属性的RDFa标签property=""。对于普通的HTML <meta name="" …>标签,您可以使用类似以下内容的代码:

document.querySelector('meta[name="description"]').content

16
简单,优雅且没有依赖性。比接受的答案
好得多

6
即使我的meta在<head>标记中,也document.head.querySelector给了我null但是document.querySelector效果很好
Robin van Baalen

10
要使其与OG标签一起使用,请像这样_加上引号:var title = document.head.querySelector('[property =“ og:title”]');
arpo

1
尼斯 “ [内容]”部分起什么作用?没有它,我还将获得meta元素。
citykid

1
@citykid似乎有些多余。如果代码的“属性”未找到该代码段,则该代码段将始终引发TypeError。[content]在选择器中包含该例外将扩展到任何匹配标签都缺少content属性的情况。IMO在这种情况下,获得空结果更有意义,但我认为这取决于实现者的偏好。
natevw

93

这里有很多很难读的答案。一支班轮

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

23

有一个更简单的方法:

document.getElementsByName('name of metatag')[0].getAttribute('content')

这至少可以追溯到IE11,从而使其更加有用。
rprez

1
document.querySelector版本可一直使用到IE8,因此功能非常丰富
fregante

这通常是一个不错的办法,但要注意的是,OP是使用RDFa的“财产”属性,而不是更基本的“name”属性(stackoverflow.com/questions/22350105/...
natevw

16
function getMetaContentByName(name,content){
   var content = (content==null)?'content':content;
   return document.querySelector("meta[name='"+name+"']").getAttribute(content);
}

以这种方式使用:

getMetaContentByName("video");

此页面上的示例:

getMetaContentByName("twitter:domain");

我使用了这个花絮,但由于meta标签本身缺失,因此在某个页面上显示为type erroras undefined。我通过分配一个变量并将其包装document.queryselector在try语句中来解决该问题,以便""在发生错误的情况下默认获得它。
bgmCoder

函数getMetaContentByName(name,content){var content =(content == null)?'content':content; 试试{return document.querySelector(“ meta [name ='” + name +“']”)。getAttribute(content); } catch {返回null;}
devMariusz


12

在Jquery中,您可以使用以下方法实现此目的:

$("meta[property='video']");

在JavaScript中,您可以使用以下方法实现此目的:

document.getElementsByTagName('meta').item(property='video');

10
这似乎可行(至少使用Chrome):document.getElementsByTagName('meta')['video'].getAttribute('content');如果标记如下:<meta name="video" content="http://video.com/video33353.mp4" />
samdeV 2014年

1
@samdeV,这是这里所有解决方案中最干净的。提交它作为您自己的答案。:)
frandroid

1
@samdeV,也不需要.getAttribute('content'),只需.content:document.getElementsByTagName('meta')['video']。content。我刚刚测试过,在Firefox中也可以正常工作。
frandroid 2015年

现在,我得知它在Safari中不起作用。该死的。
frandroid 2015年

4

方式 - [ 1 ]

function getMetaContent(property, name){
    return document.head.querySelector("["+property+"="+name+"]").content;
}
console.log(getMetaContent('name', 'csrf-token'));

您可能会得到错误:未捕获的TypeError:无法读取null的属性'getAttribute'


方式 - [ 2 ]

function getMetaContent(name){
    return document.getElementsByTagName('meta')[name].getAttribute("content");
}
console.log(getMetaContent('csrf-token'));

您可能会得到错误:未捕获的TypeError:无法读取null的属性'getAttribute'


方式 - [ 3 ]

function getMetaContent(name){
    name = document.getElementsByTagName('meta')[name];
    if(name != undefined){
        name = name.getAttribute("content");
        if(name != undefined){
            return name;
        }
    }
    return null;
}
console.log(getMetaContent('csrf-token'));

取而代之的是得到错误,null这很好。



2

该代码对我有用

<meta name="text" property="text" content="This is text" />
<meta name="video" property="text" content="http://video.com/video33353.mp4" />

JS

var x = document.getElementsByTagName("META");
    var txt = "";
    var i;
    for (i = 0; i < x.length; i++) {
        if (x[i].name=="video")
        {
             alert(x[i].content);
         }

    }    

小提琴示例:http : //jsfiddle.net/muthupandiant/ogfLwdwt/


2
function getDescription() {
    var info = document.getElementsByTagName('meta');
    return [].filter.call(info, function (val) {
        if(val.name === 'description') return val;
    })[0].content;
}

更新版本:

function getDesc() {
    var desc = document.head.querySelector('meta[name=description]');
    return desc ? desc.content : undefined;
}

1

这是一个函数,它将返回任何元标记的内容并记住结果,从而避免了不必要的DOM查询。

var getMetaContent = (function(){
        var metas = {};
        var metaGetter = function(metaName){
            var theMetaContent, wasDOMQueried = true;;
            if (metas[metaName]) {
                theMetaContent = metas[metaName];
                wasDOMQueried = false;
            }
            else {
                 Array.prototype.forEach.call(document.getElementsByTagName("meta"), function(el) {
                    if (el.name === metaName) theMetaContent = el.content;
                    metas[metaName] = theMetaContent;
                });
            }
            console.log("Q:wasDOMQueried? A:" + wasDOMQueried);
            return theMetaContent;
        }
        return metaGetter;
    })();

getMetaContent("description"); /* getMetaContent console.logs the content of the description metatag. If invoked a second time it confirms that the DOM  was only queried once */

这是一个扩展版本,它也查询开放图标记,并使用Array#some

var getMetaContent = (function(){
        var metas = {};
        var metaGetter = function(metaName){
            wasDOMQueried = true;
            if (metas[metaName]) {
                wasDOMQueried = false;
            }
            else {
                 Array.prototype.some.call(document.getElementsByTagName("meta"), function(el) {
                        if(el.name === metaName){
                           metas[metaName] = el.content;
                           return true;
                        }
                        if(el.getAttribute("property") === metaName){
                           metas[metaName] = el.content;
                           return true;
                        }
                        else{
                          metas[metaName] = "meta tag not found";
                        }  
                    });
            }
            console.info("Q:wasDOMQueried? A:" + wasDOMQueried);
            console.info(metas);
            return metas[metaName];
        }
        return metaGetter;
    })();

getMetaContent("video"); // "http://video.com/video33353.mp4"


0

我个人更喜欢将它们放在一个对象哈希中,然后可以在任何地方访问它们。可以很容易地将其设置为可注入变量,然后所有内容都可以拥有它,并且仅捕获一次。

通过包装功能,这也可以作为一个衬里完成。

var meta = (function () {
    var m = document.querySelectorAll("meta"), r = {};
    for (var i = 0; i < m.length; i += 1) {
        r[m[i].getAttribute("name")] = m[i].getAttribute("content")
    }
    return r;
})();


0
<html>
<head>
<meta property="video" content="http://video.com/video33353.mp4" />
<meta name="video" content="http://video.com/video33353.mp4" />
</head>
<body>

<script>
var meta = document.getElementsByTagName("meta");
    size = meta.length;

for(var i=0; i<size; i++) {
    if (meta[i].getAttribute("property") === "video") {
        alert(meta[i].getAttribute("content"));
    }
}
meta = document.getElementsByTagName("meta")["video"].getAttribute("content");
alert(meta);
</script>
</body>
</html>

演示版


0

如果您对获取所有元标记的更深远的解决方案有兴趣,则可以使用这段代码

function getAllMetas() {
    var metas = document.getElementsByTagName('meta');
    var summary = [];
    Array.from(metas)
        .forEach((meta) => {
            var tempsum = {};
            var attributes = meta.getAttributeNames();
            attributes.forEach(function(attribute) {
                tempsum[attribute] = meta.getAttribute(attribute);
            });
            summary.push(tempsum);
        });
    return summary;
}

// usage
console.log(getAllMetas());

-2

如果meta标签是:

<meta name="url" content="www.google.com" />

jQuery将是:

const url = $('meta[name="url"]').attr('content'); // url = 'www.google.com'

JavaScript将是:(它将返回整个HTML)

const metaHtml = document.getElementsByTagName('meta').url // metaHtml = '<meta name="url" content="www.google.com" />'
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.