web-dev-qa-db-fra.com

Comment puis-je obtenir les informations d'une méta-tag avec JavaScript?

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

HTML: 

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

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

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;
131
joepio

Très difficile à lire, répondez ici. Une doublure ici

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

Utilisé de cette façon:

getMetaContentByName("video");

L'exemple sur cette page:

getMetaContentByName("Twitter:domain");
15
devMariusz

Il y a un moyen plus facile:

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

Dans Jquery, vous pouvez y parvenir avec:

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

En JavaScript, vous pouvez y parvenir avec:

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

Manière - [1] 

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

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

Manière - [2] 

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

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

Manière - [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 d’obtenir une erreur, vous obtenez null, c’est bien.

2
Юрий Светлов

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/

2
muTheTechie
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;
}
2
Vanilla

Personnellement, je préfère simplement les mettre dans un objet hash, alors je peux y accéder n'importe où. Cela pourrait facilement être réglé sur une variable injectable et tout pourrait alors l’avoir et il n’a été saisi qu’une fois.

En encapsulant la fonction, cela peut également être fait en une couche.

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

À titre d'information, les attributs globaux https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta sont valides, ce qui signifie que l'attribut id PEUT &ECIRC;TRE UTILIS&EACUTE; AVEC getElementById.

0
jmoz

Voici une fonction qui renverra le contenu de toute balise meta et mémorisera le résultat, en évitant les requêtes inutiles sur le 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 des graph graphs ouverts , 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"
0
cssimsek