¿Cómo obtengo la información de una metaetiqueta con JavaScript?


136

La información que necesito está en una metaetiqueta. ¿Cómo puedo acceder a los "content"datos de la metaetiqueta cuando property="video"?

HTML:

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

2
Tenga en cuenta que <meta>se supone que tiene un nameatributo, no property. Los desarrolladores que utilicen el atributo estándar deberán adaptar el código proporcionado por la mayoría de las respuestas.
Jens Bannmann

Respuestas:


128

Puedes usar esto:

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

66
Lo que realmente quieres es 'dejar' mantenerlas definidas localmente;)
tommed

22
Si puede usar querySelector, puede hacer algo como esto: document.querySelector("meta[property='og:url']").getAttribute('content')
Nishchal Gautam

3
Creo que esta respuesta no es más relevante y realmente debería usar stackoverflow.com/questions/7524585/…
Sergei Basharov

Omita esta respuesta. No funciona en el caso del OP [ciertamente extraño] ya que examina el atributo "nombre" en lugar de "propiedad". Y en su estado actual es demasiado complejo pero sin ninguna ventaja de compatibilidad con versiones anteriores: ¡cualquier navegador que admita const/ letdeba admitir .querySelector!
natevw

para un solo meta atributo, ¿por qué recorrer varias veces? puede tener cientos de metaetiquetas o puede necesitar obtener el metavalor varias veces.
SKR

212

Las otras respuestas probablemente deberían hacer el truco, pero esta es más simple y no requiere jQuery:

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

La pregunta original usaba una etiqueta RDFa con un property=""atributo. Para las <meta name="" …>etiquetas HTML normales , podría usar algo como:

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

16
Simple, elegante y no tiene dependencias. Mejor que la respuesta aceptada imo
Raniz

66
Aunque mi meta está en la etiqueta <head>, document.head.querySelectorme dio nullpero document.querySelectorfuncionó perfectamente
Robin van Baalen

10
Para que funcione con etiquetas OG agregue comillas como esta_: var title = document.head.querySelector ('[propiedad = "og: title"]');
arpo

1
Bonito. ¿Para qué sirve la parte "[contenido]"? Sin él, también obtengo el meta elemento.
citykid

1
@citykid Parece algo superfluo. El fragmento siempre arrojará un TypeError si la "propiedad" no encuentra la etiqueta. La inclusión [content]en el selector extiende esa excepción al caso en el que cualquier etiqueta coincidente carece de un atributo de contenido. En mi opinión, tiene más sentido en ese caso obtener un resultado nulo, pero creo que depende de la preferencia del implementador.
natevw

93

Mucha respuesta difícil de leer aquí. Un trazador de líneas aquí

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

23

Hay una manera más fácil:

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

Esto funciona al menos hasta IE11, lo que lo hace más útil.
rprez

1
La document.querySelectorversión funciona todo el camino a IE8, por lo que un montón de
fregante

Esta es una manera bastante buena normalmente, pero tenga en cuenta que el OP está utilizando el atributo "propiedad" RDFa en lugar del atributo "nombre" más básico ( stackoverflow.com/questions/22350105/… )
natevw

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

Usado de esta manera:

getMetaContentByName("video");

El ejemplo en esta página:

getMetaContentByName("twitter:domain");

He utilizado este dato, pero en una determinada página era conseguir una type errortan undefineddebido a que la etiqueta meta en sí le faltaba. Resolví eso asignando una variable y envolviendo el document.queryselectoren una declaración de prueba para poder obtener ""por defecto en caso de error.
bgmCoder

función getMetaContentByName (nombre, contenido) {var content = (content == null)? 'content': content; intente {return document.querySelector ("meta [nombre = '" + nombre + "']"). getAttribute (contenido); } catch {return null; }}
devMariusz

15

Si usa JQuery, puede usar:

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

9
Asumiendo jquery, o alguna biblioteca; no javascript
ILMostro_7

12

En Jquery puedes lograr esto con:

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

En JavaScript puede lograr esto con:

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

10
Esto parece funcionar (al menos en cromo): document.getElementsByTagName('meta')['video'].getAttribute('content');si el marcado es el siguiente:<meta name="video" content="http://video.com/video33353.mp4" />
samdeV

1
@samdeV, esta es la más limpia de todas las soluciones aquí. Envíalo como tu propia respuesta. :)
frandroid

1
@samdeV, tampoco necesita .getAttribute ('contenido'), puede simplemente .content: document.getElementsByTagName ('meta') ['video']. content. Acabo de probar, esto funciona bien en Firefox también.
frandroid

Ahora estoy informado de que no funciona en Safari. Maldición.
frandroid

4

Camino - [ 1 ]

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

Puede obtener un error: Error de tipo no capturado: no se puede leer la propiedad 'getAttribute' de nulo


Camino - [ 2 ]

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

Puede obtener un error: Error de tipo no capturado: no se puede leer la propiedad 'getAttribute' de nulo


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

En lugar de obtener un error, obtienes null, eso es bueno.



2

Este código me funciona

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

    }    

Violín de ejemplo: http://jsfiddle.net/muthupandiant/ogfLwdwt/


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

Versión actualizada:

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

1

Aquí hay una función que devolverá el contenido de cualquier metaetiqueta y memorizará el resultado, evitando consultas innecesarias 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 */

Y aquí hay una versión extendida que también busca etiquetas de gráficos abiertos , y 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"

1

Mi variante de la función:

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

0

Personalmente prefiero simplemente obtenerlos en un hash de objeto, luego puedo acceder a ellos desde cualquier lugar. Esto podría establecerse fácilmente en una variable inyectable y luego todo podría tenerlo y solo se agarró una vez.

Al ajustar la función, esto también se puede hacer de una sola vez.

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

Manifestación


0

Si está interesado en una solución de mayor alcance para obtener todas las metaetiquetas, podría usar este fragmento de código

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

-2

si la metaetiqueta es:

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

JQuery será:

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

JavaScript será: (devolverá HTML completo)

const metaHtml = document.getElementsByTagName('meta').url // metaHtml = '<meta name="url" content="www.google.com" />'
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.