Jak uzyskać informacje z metatagu z JavaScriptem?

145

Informacje, których potrzebuję, znajdują się w metatagu. Jak mogę uzyskać dostęp do "content"danych metatagu, kiedy property="video"?

HTML:

<meta property="video" content="http://video.com/video33353.mp4" />
supercoolville
źródło
2
Zauważ, że <meta>ma mieć nameatrybut, a nie property. Programiści używający standardowego atrybutu będą musieli dostosować kod podany w większości odpowiedzi.
Jens Bannmann

Odpowiedzi:

132

Możesz użyć tego:

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'));
Saket
źródło
6
To, czego naprawdę chcesz, to „pozwól”, aby były zdefiniowane lokalnie;)
jutro
27
Jeśli możesz użyć querySelector, możesz zrobić coś takiego: document.querySelector("meta[property='og:url']").getAttribute('content')
Nishchal Gautam
3
Myślę, że ta odpowiedź nie jest bardziej odpowiednia i naprawdę powinieneś użyć stackoverflow.com/questions/7524585/ ...
Siergiej Baszarow
Pomiń tę odpowiedź. Nie działa w przypadku OP [co prawda dziwnego], ponieważ patrzy na atrybut „nazwa” zamiast atrybutu „właściwość”. W obecnym stanie jest zbyt skomplikowany, ale bez żadnej przewagi w zakresie kompatybilności wstecznej - wszystkie przeglądarki, które obsługują const/ letpowinny obsługiwać .querySelector!
natevw
tylko dla jednego atrybutu meta, po co powtarzać pętlę wiele razy? może mieć setki metatagów lub może wymagać wielokrotnego pobrania wartości meta.
SKR
232

Inne odpowiedzi prawdopodobnie powinny załatwić sprawę, ale ta jest prostsza i nie wymaga jQuery:

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

Oryginalne pytanie zawierało tag RDFa z property=""atrybutem. W przypadku normalnych <meta name="" …>tagów HTML możesz użyć czegoś takiego:

document.querySelector('meta[name="description"]').content
joepio
źródło
17
Prosty, elegancki i nie ma żadnych zależności. Lepsza niż zaakceptowana odpowiedź imo
Raniz
6
Mimo że moja meta jest w tagu <head>, document.head.querySelectordała mi, nullale document.querySelectordziałała idealnie
Robin van Baalen
10
Aby działał z tagami OG, dodaj do niego cudzysłowy w ten sposób :_: var tytuł = document.head.querySelector ('[property = "og: title"]');
arpo
1
Ładny. Jakiemu celowi służy część „[treść]”? Bez tego otrzymuję również element meta.
citykid
1
@citykid Wydaje się to trochę zbyteczne. Fragment zawsze wyrzuci TypeError, jeśli znacznik nie zostanie znaleziony przez jego „właściwość”. Uwzględnienie [content]w selektorze rozszerza ten wyjątek na przypadek, w którym dowolny pasujący znacznik nie ma atrybutu treści. IMO w takim przypadku bardziej sensowne jest uzyskanie wyniku zerowego, ale myślę, że zależy to od preferencji implementującego.
natevw
95

Tutaj jedna wkładka

document.querySelector("meta[property='og:image']").getAttribute("content");
Ced
źródło
23

Jest łatwiejszy sposób:

document.getElementsByName('name of metatag')[0].getAttribute('content')
muchacho
źródło
Działa to przynajmniej do IE11, co czyni go bardziej użytecznym.
rprez
1
document.querySelectorWersja działa przez całą drogę do IE8, więc jest mnóstwo
fregante
Zwykle jest to całkiem niezły sposób, ale zauważ, że OP używa atrybutu RDFa „property” zamiast bardziej podstawowego atrybutu „name” ( stackoverflow.com/questions/22350105/… )
natevw
17
function getMetaContentByName(name,content){
   var content = (content==null)?'content':content;
   return document.querySelector("meta[name='"+name+"']").getAttribute(content);
}

Używane w ten sposób:

getMetaContentByName("video");

Przykład na tej stronie:

getMetaContentByName("twitter:domain");
devMariusz
źródło
Użyłem tej ciekawostki, ale na pewnej stronie otrzymywałem type erroras, undefinedponieważ brakowało samego metatagu. Rozwiązałem to, przypisując zmienną i zawijając document.queryselectorinstrukcję try, dzięki czemu mogłem ""domyślnie uzyskać w przypadku błędu.
bgmCoder
function getMetaContentByName (name, content) {var content = (content == null)? 'content': content; try {return document.querySelector ("meta [name = '" + name + "']"). getAttribute (treść); } catch {return null; }}
devMariusz
15

Jeśli używasz JQuery, możesz użyć:

$("meta[property='video']").attr('content');
Elise Chant
źródło
9
Zakładając jquery lub jakąś bibliotekę; not javascript
ILMostro_7
12

W Jquery możesz to osiągnąć poprzez:

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

W JavaScript możesz to osiągnąć poprzez:

document.getElementsByTagName('meta').item(property='video');
Prameet Jain
źródło
10
Wydaje się, że to działa (przynajmniej w Chrome): document.getElementsByTagName('meta')['video'].getAttribute('content');jeśli znaczniki są takie jak poniżej:<meta name="video" content="http://video.com/video33353.mp4" />
samdeV
1
@samdeV, to najczystsze ze wszystkich rozwiązań tutaj. Prześlij to jako własną odpowiedź. :)
frandroid
1
@samdeV, również nie musisz .getAttribute ('content'), możesz po prostu .content: document.getElementsByTagName ('meta') ['video']. content. Właśnie przetestowałem, to działa również dobrze w Firefoksie.
frandroid
Zostałem poinformowany, że nie działa w Safari. Cholera.
frandroid
4

Droga - [ 1 ]

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

Może pojawić się błąd: Uncaught TypeError: Cannot read property „getAttribute” of null


Droga - [ 2 ]

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

Może pojawić się błąd: Uncaught TypeError: Cannot read property „getAttribute” of null


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

Zamiast otrzymywać błąd, nullto dobrze.

Юрий Светлов
źródło
4

Prosty, prawda?

document.head.querySelector("meta[property=video]").content
Erik Campobadal
źródło
2

Ten kod działa dla mnie

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

    }    

Przykładowe skrzypce: http://jsfiddle.net/muthupandiant/ogfLwdwt/

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

wersja aktualizacji:

function getDesc() {
    var desc = document.head.querySelector('meta[name=description]');
    return desc ? desc.content : undefined;
}
Wanilia
źródło
2

Mój wariant funkcji:

const getMetaValue = (name) => {
  const element = document.querySelector(`meta[name="${name}"]`)
  return element?.getAttribute('content')
}
Aleh Atsman
źródło
1

Oto funkcja, która zwróci zawartość dowolnego metatagu i zapamięta wynik, unikając niepotrzebnego odpytywania 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 */

A oto wersja rozszerzona, która również pyta o tagi otwartego grafu i używa 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"
cssimsek
źródło
0

Osobiście wolę uzyskać je w jednym skrócie obiektu, wtedy mam do nich dostęp w dowolnym miejscu. Można to łatwo ustawić na zmienną do wstrzykiwania, a potem wszystko może to mieć i tylko raz.

Dzięki owinięciu funkcji można to również zrobić jako jedną wkładkę.

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;
})();
Wes Jones
źródło
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>

Próbny

Leandro Sciola
źródło
0

Jeśli jesteś zainteresowany bardziej dalekosiężnym rozwiązaniem do pobierania wszystkich metatagów, możesz użyć tego fragmentu kodu

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());
Schabbi
źródło
-3

jeśli metatag to:

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

JQuery będzie:

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

JavaScript będzie: (Zwróci cały HTML)

const metaHtml = document.getElementsByTagName('meta').url // metaHtml = '<meta name="url" content="www.google.com" />'
SKR
źródło