it-swarm.com.de

Wie erhalte ich die Informationen aus einem Meta-Tag mit JavaScript?

Die Informationen, die ich brauche, befinden sich in einem Meta-Tag. Wie kann ich bei "content" auf die property="video"-Daten des Meta-Tags zugreifen?

HTML:

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

Sie können dies verwenden:

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

Die anderen Antworten sollten den Trick wahrscheinlich tun, aber diese ist einfacher und erfordert keine jQuery

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

Sehr schwer zu lesende Antwort hier. Ein Liner hier

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

Auf diese Weise verwendet:

getMetaContentByName("video");

Das Beispiel auf dieser Seite:

getMetaContentByName("Twitter:domain");
15
devMariusz

Es gibt einen einfacheren Weg:

document.getElementsByName('name of metatag')[0].getAttribute('content')
15
muchacho
$("meta[property='video']").attr('content');
12
Elise Chant

In Jquery können Sie dies erreichen mit:

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

In JavaScript können Sie dies erreichen mit:

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

Weg - [1]

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

Möglicherweise wird eine Fehlermeldung angezeigt: Nicht abgerufener TypeError: Die Eigenschaft 'getAttribute' kann nicht gelesen werden


Weg - [2]

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

Möglicherweise wird eine Fehlermeldung angezeigt: Nicht abgerufener TypeError: Die Eigenschaft 'getAttribute' kann nicht gelesen werden


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

Statt Fehler zu bekommen, erhalten Sie null, das ist gut.

Dieser Code funktioniert für mich

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

    }    

Beispiel Geige: http://jsfiddle.net/muthupandiant/ogfLwdwt/

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

update-Version:

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

Ich persönlich ziehe es vor, sie nur in einem Objekt-Hash zu bekommen, dann kann ich überall darauf zugreifen. Dies könnte leicht auf eine injizierbare Variable gesetzt werden, und dann könnte alles vorhanden sein und es wurde nur einmal erfasst.

Durch das Umwickeln der Funktion kann dies auch als Einlage ausgeführt werden.

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
Wes Jones

Zu Ihrer Information gemäß https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta sind globale Attribute gültig, was bedeutet, dass das id-ATTRIBUT MIT getElementById verwendet werden kann.

0
jmoz

Hier ist eine Funktion, die den Inhalt eines beliebigen Meta-Tags zurückgibt und das Ergebnis speichert, um unnötige Abfragen des DOM zu vermeiden. 

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 */

Und hier ist eine erweiterte Version, die auch nach open graph tags fragt und Array # some verwendet:

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
cssimsek