Bilgileri JavaScript içeren bir meta etiketten nasıl alırım?

İhtiyacım olan bilgi bir meta etiketinde. "content"Meta etiketin verilerine ne zaman erişebilirim property="video"?

HTML:

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

Bunu kullanabilirsiniz:

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

Diğer cevaplar muhtemelen işe yarayacaktır, ancak bu daha basittir ve jQuery gerektirmez:

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

Orijinal soru , özniteliğe sahip bir RDFa etiketi kullandı property="". Normal HTML <meta name="" …>etiketleri için aşağıdaki gibi bir şey kullanabilirsiniz:

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

Burada cevabı okumak çok zor. Buraya bir astar

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

Daha kolay bir yol var:

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

Bu şekilde kullanılır:

getMetaContentByName("video");

Bu sayfadaki örnek:

getMetaContentByName("twitter:domain");

JQuery kullanıyorsanız şunları kullanabilirsiniz:

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

Jquery'de bunu şununla başarabilirsiniz:

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

JavaScript'te bunu şununla başarabilirsiniz:

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

Yol - [ 1 ]

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

Hatayla karşılaşabilirsiniz: Yakalanmamış TypeError: null 'getAttribute' özelliği okunamıyor

yol - [ 2 ]

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

Hatayla karşılaşabilirsiniz: Yakalanmamış TypeError: null 'getAttribute' özelliği okunamıyor

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

Bunun yerine hata alırsınız null, bu iyidir.

Basit olan, değil mi?

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

Bu kod benim için çalışıyor

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

    }    

Örnek keman: 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;
}

güncelleme sürümü:

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

Burada herhangi bir meta etiketin içeriğini döndürecek ve sonucu hatırlayarak DOM'un gereksiz sorgulanmasını önleyecek bir işlev var.

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

Ve işte ayrıca açık grafik etiketlerini sorgulayan ve Array # some'ı kullanan genişletilmiş bir sürüm :

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"

İşlevin varyantı:

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

Ben şahsen onları bir nesne karmasında almayı tercih ediyorum, o zaman onlara her yerden erişebilirim. Bu kolayca enjekte edilebilir bir değişkene ayarlanabilir ve sonra her şey ona sahip olabilir ve sadece bir kez yakalanır.

Fonksiyonu sararak bu tek astar olarak da yapılabilir.

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

Bilginize https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta'ya göre global öznitelikler geçerlidir, bu da idözniteliğin birlikte kullanılabileceğigetElementById anlamına gelir .

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

gösteri

Tüm meta etiketleri almak için daha kapsamlı bir çözümle ilgileniyorsanız, bu kod parçasını kullanabilirsiniz.

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

meta etiket ise:

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

JQuery şöyle olacaktır:

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

JavaScript şöyle olacaktır: (Tüm HTML'yi döndürecektir)

const metaHtml = document.getElementsByTagName('meta').url // metaHtml = '<meta name="url" content="www.google.com" />'