Bagaimana cara saya mendapatkan informasi dari meta tag dengan JavaScript?

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

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

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

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

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

Ada cara yang lebih mudah:

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

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

Jika Anda menggunakan JQuery, Anda dapat menggunakan:

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

Di Jquery Anda dapat mencapai ini dengan:

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

Dalam JavaScript Anda dapat mencapainya dengan:

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

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.

Sederhana, bukan?

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

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/

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

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"

Varian saya dari fungsi:

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

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

FYI menurut https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta atribut global valid yang berarti idatribut tersebut dapat digunakangetElementById .

<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

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

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" />'