Bagaimana cara saya mendapatkan informasi dari meta tag dengan JavaScript?


136

Informasi yang saya butuhkan ada dalam tag meta. Bagaimana saya bisa mengakses "content"data dari tag meta kapan property="video"?

HTML:

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

2
Catatan yang <meta>seharusnya memiliki nameatribut, bukan property. Pengembang yang menggunakan atribut standar perlu mengadaptasi kode yang diberikan oleh sebagian besar jawaban.
Jens Bannmann

Jawaban:


128

Anda bisa menggunakan ini:

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
Yang benar-benar Anda inginkan adalah 'biarkan' agar mereka tetap didefinisikan secara lokal;)
tommed

22
Jika Anda dapat menggunakan querySelector, Anda dapat melakukan sesuatu seperti ini: document.querySelector("meta[property='og:url']").getAttribute('content')
Nishchal Gautam

3
Saya pikir jawaban ini tidak lebih relevan dan Anda harus benar-benar menggunakan stackoverflow.com/questions/7524585/…
Sergei Basharov

Lewati jawaban ini. Ini tidak berfungsi dalam kasus OP [diakui aneh] karena melihat atribut "nama" dan bukan "properti". Dan dalam kondisi saat ini terlalu rumit tetapi tanpa keuntungan kompatibilitas ke belakang - browser apa pun yang mendukung const/ letharus mendukung .querySelector!
natevw

hanya untuk satu atribut meta, mengapa harus berulang kali? mungkin memiliki ratusan tag meta atau mungkin perlu mendapatkan nilai meta beberapa kali.
SKR

212

Jawaban lain mungkin harus melakukan trik, tetapi yang ini lebih sederhana dan tidak memerlukan jQuery:

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

Pertanyaan asli menggunakan tag RDFa dengan property=""atribut. Untuk <meta name="" …>tag HTML normal, Anda dapat menggunakan sesuatu seperti:

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

16
Sederhana, elegan dan tidak memiliki ketergantungan. Lebih baik daripada jawaban yang diterima imo
Raniz

6
Meskipun meta saya ada di tag <head>, document.head.querySelectormemberi saya nulltetapi document.querySelectorberfungsi dengan baik
Robin van Baalen

10
Untuk membuatnya berfungsi dengan tag OG, tambahkan tanda kutip seperti ini_: var title = document.head.querySelector ('[property = "og: title"]');
arpo

1
Bagus. Tujuan apa yang dilayani oleh bagian "[konten]"? Tanpa itu, saya juga mendapatkan elemen meta.
citykid

1
@citykid Tampaknya agak berlebihan. Cuplikan akan selalu melempar TypeError jika tag tidak ditemukan oleh "propertinya". Termasuk [content]dalam pemilih memperluas pengecualian itu untuk kasus di mana setiap tag yang cocok tidak memiliki atribut konten. IMO lebih masuk akal dalam hal ini untuk mendapatkan hasil nol tetapi terserah preferensi pelaksana saya kira.
natevw

93

Banyak jawaban yang sulit dibaca di sini. Satu liner di sini

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

23

Ada cara yang lebih mudah:

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

Ini berfungsi kembali ke setidaknya IE11, yang membuatnya lebih bermanfaat.
rprez

1
The document.querySelectorVersi bekerja sampai ke IE8, begitu banyak itu
fregante

Ini adalah cara yang cukup baik biasanya, tetapi perhatikan bahwa OP menggunakan atribut "properti"
RDF

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

Digunakan dengan cara ini:

getMetaContentByName("video");

Contoh di halaman ini:

getMetaContentByName("twitter:domain");

Saya menggunakan berita gembira ini, tetapi pada halaman tertentu yang mendapatkan type errorsebagai undefinedkarena meta tag itu sendiri hilang. Saya mengatasinya dengan menetapkan variabel dan membungkusnya document.queryselectordalam pernyataan coba sehingga saya bisa mendapatkan ""secara default jika terjadi kesalahan.
bgmCoder

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

15

Jika Anda menggunakan JQuery, Anda dapat menggunakan:

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

9
Dengan asumsi jquery, atau perpustakaan; bukan javascript
ILMostro_7

12

Di Jquery Anda dapat mencapai ini dengan:

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

Dalam JavaScript Anda dapat mencapainya dengan:

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

10
Ini sepertinya berhasil (minimal di chrome): document.getElementsByTagName('meta')['video'].getAttribute('content');jika <meta name="video" content="http://video.com/video33353.mp4" />
markupnya

1
@samdeV, ini adalah solusi terbersih dari semua di sini. Kirimkan sebagai jawaban Anda sendiri. :)
frandroid

1
@samdeV, Anda juga tidak perlu .getAttribute ('content'), Anda bisa .content: document.getElementsByTagName ('meta') ['video']. content. Saya baru saja menguji, ini berfungsi dengan baik di Firefox juga.
frandroid

Saya sekarang diberitahu bahwa itu tidak berfungsi di Safari. Sial.
frandroid

4

Cara - [ 1 ]

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

Anda mungkin mendapatkan kesalahan: UnEught TypeError: Tidak dapat membaca properti 'getAttribute' dari nol


Cara - [ 2 ]

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

Anda mungkin mendapatkan kesalahan: UnEught TypeError: Tidak dapat membaca properti 'getAttribute' dari nol


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

Alih-alih mendapatkan kesalahan, Anda mendapatkan null, itu bagus.



2

Kode ini berfungsi untuk saya

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

    }    

Contoh biola: 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 pembaruan:

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

1

Berikut adalah fungsi yang akan mengembalikan konten tag meta apa pun dan akan memorisasikan hasilnya, menghindari permintaan DOM yang tidak perlu.

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

Dan inilah versi yang diperluas yang juga menanyakan tag grafik terbuka , dan menggunakan 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

Varian saya dari fungsi:

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

0

Saya pribadi lebih suka hanya mendapatkan mereka dalam satu objek hash, maka saya dapat mengaksesnya di mana saja. Ini bisa dengan mudah diatur ke variabel injeksi dan kemudian semuanya bisa memilikinya dan hanya meraih satu kali.

Dengan membungkus fungsi ini juga dapat dilakukan sebagai satu 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

Jika Anda interessted dalam solusi yang lebih jauh untuk mendapatkan semua meta tag Anda bisa menggunakan kode ini

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

jika tag meta adalah:

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

JQuery akan:

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

JavaScript akan menjadi: (Ini akan mengembalikan seluruh HTML)

const metaHtml = document.getElementsByTagName('meta').url // metaHtml = '<meta name="url" content="www.google.com" />'
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.