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

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

HTML:

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

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

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

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

In der ursprünglichen Frage wurde ein RDFa- Tag mit einem property=""Attribut verwendet. Für die normalen HTML- <meta name="" …>Tags können Sie Folgendes verwenden:

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

Viele schwer zu lesende Antworten hier. Ein Liner hier

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

Es gibt einen einfacheren Weg:

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

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

Wenn Sie JQuery verwenden, können Sie Folgendes verwenden:

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

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

Weg - [ 1 ]

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

Möglicherweise wird folgende Fehlermeldung angezeigt: Nicht erfasster Typfehler: Die Eigenschaft 'getAttribute' von null kann nicht gelesen werden

Weg - [ 2 ]

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

Möglicherweise wird folgende Fehlermeldung angezeigt: Nicht erfasster Typfehler: Die Eigenschaft 'getAttribute' von null 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'));

Anstatt Fehler zu bekommen null, bekommen Sie , das ist gut.

Einfach, oder?

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

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/

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

Meine Variante der Funktion:

const getMetaValue = (name) => {
  const element = document.querySelector(`meta[name="${name}"]`)
  return element?.getAttribute('content')
}

Hier ist eine Funktion, die den Inhalt eines 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 offenen Diagramm-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"

Ich persönlich bevorzuge es, sie nur in einem Objekt-Hash abzurufen, dann kann ich überall darauf zugreifen. Dies könnte leicht auf eine injizierbare Variable gesetzt werden und dann könnte alles es haben und es würde nur einmal greifen.

Durch Umschließen der Funktion kann dies auch als Einzeiler erfolgen.

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

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

<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

Wenn Sie an einer weitreichenderen Lösung interessiert sind, um alle Meta-Tags zu erhalten, können Sie diesen Code verwenden

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

Wenn das Meta-Tag lautet:

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

JQuery wird sein:

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

JavaScript wird sein: (Es wird ganzes HTML zurückgeben)

const metaHtml = document.getElementsByTagName('meta').url // metaHtml = '<meta name="url" content="www.google.com" />'