如何从带有JavaScript的元标记中获取信息?

时间:2011-09-23 05:20:54

标签: javascript html greasemonkey meta-tags

我需要的信息是元标记。如何在"content"

时访问元标记的property="video"数据

HTML:

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

21 个答案:

答案 0 :(得分:150)

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

SELECT SUBSTR('000' || CAST((RANK() OVER (ORDER BY 1,2,32)) AS VARCHAR(3)), -3, 3) 
FROM DUAL;

答案 1 :(得分:102)

您可以使用:

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

答案 2 :(得分:65)

这里有很多难以理解的答案。这里有一个班轮

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

答案 3 :(得分:17)

有一种更简单的方法:

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

答案 4 :(得分:15)

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

以这种方式使用:

getMetaContentByName("video");

此页面上的示例:

getMetaContentByName("twitter:domain");

答案 5 :(得分:13)

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

答案 6 :(得分:11)

在Jquery中,您可以通过以下方式实现此目的:

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

在JavaScript中,您可以通过以下方式实现此目的:

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

答案 7 :(得分: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,这很好。

答案 8 :(得分:2)

xxd

更新版本:

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

答案 9 :(得分: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/

答案 10 :(得分:2)

我的函数变体

{"database": {"name_01": {"count": 1,
                          "file_count": 1,
                          "folder_count": 0,
                          "hdd_master_name": "name_01_suffix",
                          "last_scanned": "14/04/20 15:55",
                          "name": "name_01",
                          "server_path": "root.txt",
                          "size": "0.18"},
              "name_02": {"all_types_count": 4,
                          "file_count": 8,
                          "folder_count": 0,
                          "hdd_master_name": "name_02_suffix",
                          "last_scanned": "14/04/20 15:55",
                          "name": "name_02",
                          "server_path": "...",
                          "size": "50.34"}}}

答案 11 :(得分:2)

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

这样你就可以得到meta的内容了。

答案 12 :(得分:1)

简单的一个,对吧?

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

答案 13 :(得分:0)

这是一个函数,它将返回任何元标记的内容并记住结果,避免不必要的查询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 */

这是一个扩展版本,也会查询open graph tags,并使用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"

答案 14 :(得分: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;
})();

答案 15 :(得分:0)

根据{{​​3}}全局属性的

FYI有效,这意味着 ast.literal_eval属性可以与id 一起使用。

答案 16 :(得分: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>

Demo

答案 17 :(得分: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());

答案 18 :(得分:0)

将所有元值复制到缓存对象:

/* <meta name="video" content="some-video"> */

const meta = Array.from(document.querySelectorAll('meta[name]')).reduce((acc, meta) => (
  Object.assign(acc, { [meta.name]: meta.content })), {});

console.log(meta.video);

答案 19 :(得分:-1)

如果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" />'

答案 20 :(得分:-1)

document.head.querySelector('meta[property=video]').content;