Como obtenho as informações de uma metatag com JavaScript?


136

As informações necessárias estão em uma metatag. Como posso acessar os "content"dados da metatag quando property="video"?

HTML:

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

2
Note que <meta>é suposto ter um nameatributo, não property. Os desenvolvedores que usam o atributo padrão precisarão adaptar o código fornecido pela maioria das respostas.
Jens Bannmann #

Respostas:


128

Você pode usar isto:

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

6
O que você realmente quer é 'let' para mantê-los definido localmente;)
tommed

22
Se você pode usar o querySelector, pode fazer algo assim: document.querySelector("meta[property='og:url']").getAttribute('content')
Nishchal Gautam

3
Eu acho que essa resposta não é mais relevante e você realmente deve usar stackoverflow.com/questions/7524585/...
Sergei Basharov

Pule esta resposta. Ele não funciona no caso [reconhecidamente estranho] do OP, uma vez que analisa o atributo "nome" em vez de "propriedade". E no seu estado atual, é excessivamente complexo, mas sem nenhuma vantagem de compatibilidade com versões anteriores - qualquer navegador que suporte const/ letdeve suportar .querySelector!
natevw 28/02

para apenas um meta atributo, por que repetir várias vezes? pode ter centenas de metatags ou talvez seja necessário obter o valor meta várias vezes.
SKR

212

As outras respostas provavelmente devem funcionar, mas essa é mais simples e não requer jQuery:

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

A pergunta original usava uma tag RDFa com um property=""atributo. Para as <meta name="" …>tags HTML normais, você pode usar algo como:

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

16
Simples, elegante e não tem dependências. Melhor do que a resposta aceita imo
Raniz

6
Mesmo que minha meta é na tag <head>, document.head.querySelectorme deu null, mas document.querySelectorfuncionou perfeitamente
Robin van Baalen

10
Para fazê-lo funcionar com tags OG, adicione aspas a ele como este_: var title = document.head.querySelector ('[property = "og: title"]');
Arpo

1
Legais. Qual é o objetivo da parte "[content]"? Sem ele, também recebo o meta elemento.
Citykid

1
@citykid Parece um pouco supérfluo. O trecho sempre lançará um TypeError se a tag não for encontrada por sua "propriedade". A inclusão [content]no seletor estende essa exceção ao caso em que qualquer tag correspondente não possui um atributo de conteúdo. Na IMO, nesse caso, faz mais sentido obter um resultado nulo, mas acho que depende da preferência do implementador.
natevw 28/02

93

Muito difícil de ler resposta aqui. Um forro aqui

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

23

Existe uma maneira mais fácil:

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

Isso funciona no mínimo no IE11, o que o torna mais útil.
rprez

1
A document.querySelectorversão funciona todo o caminho para o IE8, por isso é muito
fregante

Essa é uma maneira bastante boa normalmente, mas observe que o OP está usando o atributo "propriedade" RDFa em vez do atributo "nome" mais 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 desta maneira:

getMetaContentByName("video");

O exemplo nesta página:

getMetaContentByName("twitter:domain");

Eu usei esse boato, mas em uma determinada página estava ficando type errorcomo undefinedporque a própria metatag estava faltando. Resolvi isso atribuindo uma variável e envolvendo a document.queryselectorinstrução try para que eu pudesse obter ""por padrão em caso de erro.
precisa saber é o seguinte

função getMetaContentByName (nome, conteúdo) {var content = (content == null)? 'content': content; tente {return document.querySelector ("meta [nome = '" + nome + "']"). getAttribute (content); } catch {return null; }}
devMariusz 27/11/19

15

Se você usa JQuery, pode usar:

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

9
Supondo jquery, ou alguma biblioteca; não javascript
ILMostro_7

12

No Jquery, você pode conseguir isso com:

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

Em JavaScript, você pode conseguir isso com:

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

10
Isso parece funcionar (pelo menos no chrome): document.getElementsByTagName('meta')['video'].getAttribute('content');se a marcação for a seguinte:<meta name="video" content="http://video.com/video33353.mp4" />
samdeV 8/08/14

1
@samdeV, esta é a mais limpa de todas as soluções aqui. Envie como sua própria resposta. :)
frandroid

1
@samdeV, você também não precisa .getAttribute ('content'), você pode apenas .content: document.getElementsByTagName ('meta') ['video']. content. Acabei de testar, isso também funciona bem no Firefox.
Frandroid 5/11

Agora estou informado de que não funciona no Safari. Droga.
Frandroid

4

Caminho - [ 1 ]

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

Você pode receber um erro: TypeError não capturado: Não é possível ler a propriedade 'getAttribute' nula


Caminho - [ 2 ]

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

Você pode receber um erro: TypeError não capturado: Não é possível ler a propriedade 'getAttribute' nula


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

Em vez de obter erro, você recebe null, isso é bom.



2

Este código funciona para mim

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

    }    

Exemplo de violino: 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;
}

Versão atualizada:

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

1

Aqui está uma função que retornará o conteúdo de qualquer metatag e memorizará o resultado, evitando consultas desnecessárias ao 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 */

E aqui está uma versão estendida que também consulta tags de gráfico aberto e usa a Matriz # 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

Minha variante da função:

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

0

Pessoalmente, prefiro colocá-los em um objeto hash, para acessá-los em qualquer lugar. Isso pode ser facilmente configurado como uma variável injetável e, em seguida, tudo pode ter, e ele é capturado apenas uma vez.

Ao envolver a função, isso também pode ser feito como um liner.

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>

Demo


0

Se você estiver interessado em uma solução mais abrangente para obter todas as metatags, poderá usar este trecho 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

se a meta tag for:

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

O JQuery será:

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

O JavaScript será: (Ele retornará HTML inteiro)

const metaHtml = document.getElementsByTagName('meta').url // metaHtml = '<meta name="url" content="www.google.com" />'
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.