Làm cách nào để lấy thông tin từ thẻ meta bằng JavaScript?

Thông tin tôi cần là trong một thẻ meta. Làm thế nào tôi có thể truy cập "content"dữ liệu của thẻ meta khi property="video"nào?

HTML:

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

Bạn có thể sử dụng điều này:

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

Các câu trả lời khác có lẽ nên thực hiện mẹo, nhưng câu trả lời này đơn giản hơn và không yêu cầu jQuery:

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

Câu hỏi ban đầu đã sử dụng thẻ RDFa với một property=""thuộc tính. Đối với các <meta name="" …>thẻ HTML thông thường, bạn có thể sử dụng một cái gì đó như:

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

Rất nhiều câu trả lời khó đọc ở đây. Một lớp lót ở đây

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

Co một cach dê dang hơn:

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

Được sử dụng theo cách này:

getMetaContentByName("video");

Ví dụ trên trang này:

getMetaContentByName("twitter:domain");

Nếu bạn sử dụng JQuery, bạn có thể sử dụng:

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

Trong Jquery bạn có thể đạt được điều này với:

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

Trong JavaScript, bạn có thể đạt được điều này với:

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

Cách - [ 1 ]

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

Bạn có thể gặp lỗi: Uncaught TypeError: Không thể đọc thuộc tính 'getAttribution' của null

Cách - [ 2 ]

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

Bạn có thể gặp lỗi: Uncaught TypeError: Không thể đọc thuộc tính 'getAttribution' của null

Cách - [ 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'));

Thay vì nhận được lỗi, bạn nhận được null, đó là tốt.

Đơn giản phải không?

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

Mã này làm việc cho tôi

<meta name="text" property="text" content="This is text" />
<meta name="video" property="text" content="http://video.com/video33353.mp4" />

Mã não

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

    }    

Ví dụ fiddle: 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;
}

Bản nâng cấp:

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

Biến thể của tôi của chức năng:

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

Đây là một hàm sẽ trả về nội dung của bất kỳ thẻ meta nào và sẽ ghi nhớ kết quả, tránh việc truy vấn DOM không cần thiết.

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

Và đây là phiên bản mở rộng cũng truy vấn các thẻ biểu đồ mở và sử dụng 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"

Cá nhân tôi thích chỉ cần lấy chúng trong một hàm băm đối tượng, sau đó tôi có thể truy cập chúng ở bất cứ đâu. Điều này có thể dễ dàng được đặt thành một biến có thể tiêm và sau đó mọi thứ có thể có nó và nó chỉ được lấy một lần.

Bằng cách gói chức năng này cũng có thể được thực hiện như một lớp lót.

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 theo https://developer.mozilla.org/en-US/docs/Web/HTML/Euity/meta thuộc tính toàn cầu là hợp lệ, có nghĩa là idthuộc tính có thể được sử dụng vớigetElementById .

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

Bản giới thiệu

Nếu bạn đang xen vào một giải pháp sâu rộng hơn để có được tất cả các thẻ meta, bạn có thể sử dụng đoạn mã này

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

nếu thẻ meta là:

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

JQuery sẽ là:

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

JavaScript sẽ là: (Nó sẽ trả về toàn bộ HTML)

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