Comment obtenir les informations d'une balise Meta avec JavaScript?

Les informations dont j'ai besoin se trouvent dans une balise meta. Comment puis-je accéder aux "content"données de la balise meta quand property="video"?

HTML:

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

Vous pouvez utiliser ceci:

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

Les autres réponses devraient probablement faire l'affaire, mais celle-ci est plus simple et ne nécessite pas jQuery:

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

La question d'origine utilisait une balise RDFa avec un property=""attribut. Pour les <meta name="" …>balises HTML normales, vous pouvez utiliser quelque chose comme:

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

Beaucoup de réponses difficiles à lire ici. Une doublure ici

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

Il existe un moyen plus simple:

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

Utilisé de cette manière:

getMetaContentByName("video");

L'exemple sur cette page:

getMetaContentByName("twitter:domain");

Si vous utilisez JQuery, vous pouvez utiliser:

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

Dans Jquery, vous pouvez y parvenir avec:

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

En JavaScript, vous pouvez y parvenir avec:

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

Chemin - [ 1 ]

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

Vous pouvez obtenir l'erreur: Uncaught TypeError: Impossible de lire la propriété 'getAttribute' de null

Chemin - [ 2 ]

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

Vous pouvez obtenir l'erreur: Uncaught TypeError: Impossible de lire la propriété 'getAttribute' de null

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

Au lieu de recevoir une erreur, vous obtenez null, c'est bien.

Simple, non?

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

Ce code fonctionne pour moi

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

    }    

Exemple de violon: 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;
}

Version de mise à jour:

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

Voici une fonction qui renverra le contenu de n'importe quelle balise meta et mémorisera le résultat, évitant les requêtes inutiles du 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 */

Et voici une version étendue qui interroge également les balises graphiques ouvertes et utilise 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"

Ma variante de la fonction:

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

Personnellement, je préfère les obtenir dans un hachage d'objet, puis je peux y accéder n'importe où. Cela pourrait facilement être défini sur une variable injectable, puis tout pourrait l'avoir et ne l'attraper qu'une seule fois.

En enveloppant la fonction, cela peut également être fait comme une seule doublure.

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

FYI selon https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta, les attributs globaux sont valides, ce qui signifie que l' idattribut peut être utilisé avecgetElementById .

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

Démo

Si vous êtes intéressé par une solution plus poussée pour obtenir toutes les balises méta, vous pouvez utiliser ce morceau de code

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

si la balise meta est:

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

JQuery sera:

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

JavaScript sera: (Il renverra du HTML entier)

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