Come posso ottenere le informazioni da un meta tag con JavaScript?

Le informazioni di cui ho bisogno sono in un meta tag. Come posso accedere ai "content"dati del meta tag quando property="video"?

HTML:

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

Puoi usare questo:

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

Le altre risposte dovrebbero probabilmente fare il trucco, ma questa è più semplice e non richiede jQuery:

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

La domanda originale utilizzava un tag RDFa con un property=""attributo. Per i normali <meta name="" …>tag HTML puoi usare qualcosa come:

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

Molte risposte difficili da leggere qui. Una fodera qui

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

C'è un modo più semplice:

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

Usato in questo modo:

getMetaContentByName("video");

L'esempio in questa pagina:

getMetaContentByName("twitter:domain");

Se si utilizza JQuery, è possibile utilizzare:

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

In Jquery puoi farlo con:

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

In JavaScript puoi farlo con:

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

Way - [ 1 ]

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

È possibile che venga visualizzato l'errore: TypeError non rilevato: impossibile leggere la proprietà 'getAttribute' di null

Way - [ 2 ]

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

È possibile che venga visualizzato l'errore: TypeError non rilevato: impossibile leggere la proprietà 'getAttribute' di null

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

Invece ottenere l'errore, ottieni null, va bene.

Semplice, vero?

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

Questo codice funziona per me

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

    }    

Esempio di violino: 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;
}

versione aggiornata:

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

Ecco una funzione che restituirà il contenuto di qualsiasi meta tag e memorizzerà il risultato, evitando inutili interrogazioni del 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 */

Ed ecco una versione estesa che richiede anche tag per grafici aperti e usa 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"

La mia variante della funzione:

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

Personalmente preferisco semplicemente ottenerli in un hash oggetto, quindi posso accedervi ovunque. Questo potrebbe essere facilmente impostato su una variabile iniettabile e quindi tutto potrebbe averlo e si afferrò solo una volta.

Avvolgendo la funzione questo può anche essere fatto come una fodera.

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

Cordiali saluti secondo https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta gli attributi globali sono validi, il che significa che l' idattributo può essere utilizzato congetElementById .

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

dimostrazione

Se sei interessato a una soluzione di più ampia portata per ottenere tutti i meta tag, puoi utilizzare questo pezzo di codice

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

se il meta tag è:

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

JQuery sarà:

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

JavaScript sarà: (Restituirà l'intero HTML)

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