Как получить информацию из метатега с помощью JavaScript?


136

Информация, которая мне нужна, находится в метатеге. Как я могу получить доступ к "content"данным метатега, когда property="video"?

HTML:

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

2
Обратите внимание, что <meta>предполагается наличие nameатрибута, а не property. Разработчики, использующие стандартный атрибут, должны будут адаптировать код, приведенный в большинстве ответов.
Jens Bannmann 06

Ответы:


128

Вы можете использовать это:

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
На самом деле вы хотите, чтобы они
оставались

22
Если вы можете использовать querySelector, вы можете сделать что-то вроде этого: document.querySelector("meta[property='og:url']").getAttribute('content')
Nishchal Gautam

3
Я думаю, что этот ответ не является более актуальным, и вам действительно стоит использовать stackoverflow.com/questions/7524585/…
Сергей Башаров

Пропустите этот ответ. Он не работает в [по общему признанию странном] случае OP, поскольку он смотрит на атрибут «name», а не на «property». И в его текущем состоянии он слишком сложен, но без каких-либо преимуществ обратной совместимости - любые браузеры, которые поддерживают const/ letдолжны поддерживать .querySelector!
natevw

только для одного метаатрибута, зачем повторять несколько раз? он может иметь сотни мета-тегов или ему может потребоваться получить мета-значение несколько раз.
SKR

212

Другие ответы, вероятно, должны помочь, но этот проще и не требует jQuery:

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

В исходном вопросе использовался тег RDFa с property=""атрибутом. Для обычных HTML- <meta name="" …>тегов вы можете использовать что-то вроде:

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

16
Просто, элегантно и без зависимостей. Лучше, чем принятый ответ imo
Raniz

6
Несмотря на то, что моя мета находится в теге <head>, document.head.querySelectorдала мне, nullно document.querySelectorработала отлично
Робин ван Баален

10
Чтобы заставить его работать с тегами OG, добавьте к нему кавычки, например this_: var title = document.head.querySelector ('[property = "og: title"]');
arpo

1
Отлично. Какой цели служит часть "[содержание]"? Без него я также получаю метаэлемент.
citykid

1
@citykid Это действительно кажется лишним. Фрагмент всегда выдает ошибку TypeError, если тег не найден по его «свойству». Включение [content]в селектор распространяет это исключение на случай, когда у любого совпадающего тега отсутствует атрибут содержимого. ИМО, в этом случае имеет смысл получить нулевой результат, но я думаю, это зависит от предпочтений разработчика.
natevw

93

Здесь очень трудно прочитать ответ. Один лайнер здесь

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

23

Есть способ попроще:

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

Это работает по крайней мере с IE11, что делает его более полезным.
rprez

1
Эта document.querySelectorверсия работает до IE8, так что ее предостаточно
fregante

Обычно это довольно хороший способ, но обратите внимание, что OP использует атрибут «свойство» RDFa вместо более простого атрибута «имя» ( stackoverflow.com/questions/22350105/… )
natevw

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

Используется таким образом:

getMetaContentByName("video");

Пример на этой странице:

getMetaContentByName("twitter:domain");

Я использовал этот лакомый кусочек, но на определенной странице получал type erroras, undefinedпотому что сам метатег отсутствовал. Я решил это, назначив переменную и заключив ее document.queryselectorв оператор try, чтобы ""в случае ошибки я мог получить ее по умолчанию.
bgmCoder

функция getMetaContentByName (имя, контент) {var content = (content == null)? 'content': content; попробуйте {return document.querySelector ("meta [name = '" + name + "']"). getAttribute (content); } catch {return null; }}
devMariusz

15

Если вы используете JQuery, вы можете использовать:

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

9
Предполагая jquery или некоторую библиотеку; не javascript
ILMostro_7

12

В JQuery вы можете добиться этого с помощью:

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

В JavaScript этого можно добиться с помощью:

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

10
Кажется, это работает (по крайней мере, в хроме): document.getElementsByTagName('meta')['video'].getAttribute('content');если разметка <meta name="video" content="http://video.com/video33353.mp4" />
следующая

1
@samdeV, это самое чистое из всех решений здесь. Отправьте это как свой собственный ответ. :)
frandroid 05

1
@samdeV, также вам не нужно .getAttribute ('content'), вы можете просто .content: document.getElementsByTagName ('meta') ['video']. content. Я только что протестировал, это отлично работает и в Firefox.
frandroid 05

Мне теперь сообщили, что это не работает в Safari. Черт побери.
frandroid

4

Путь - [ 1 ]

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

Вы можете получить ошибку: Uncaught TypeError: Невозможно прочитать свойство getAttribute, равное null


Путь - [ 2 ]

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

Вы можете получить ошибку: Uncaught TypeError: Невозможно прочитать свойство getAttribute, равное null


Путь - [ 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'));

Вместо того, чтобы получить ошибку, вы получите nullэто хорошо.



2

Этот код работает для меня

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

    }    

Пример скрипки: 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;
}

версия обновления:

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

1

Вот функция, которая вернет содержимое любого метатега и запомнит результат, избегая ненужных запросов к 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 */

А вот расширенная версия, которая также запрашивает теги открытого графа и использует массив # 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

Мой вариант функции:

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

0

Я лично предпочитаю помещать их в один хэш объекта, тогда я могу получить к ним доступ где угодно. Это может быть легко установлено на вводимую переменную, и тогда она может быть у всех, и она будет получена только один раз.

Обернув функцию, это также можно сделать одним лайнером.

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>

демонстрация


0

Если вас интересует более далеко идущее решение для получения всех метатегов, вы можете использовать этот фрагмент кода.

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

если метатег:

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

JQuery будет:

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

JavaScript будет: (Он вернет весь HTML)

const metaHtml = document.getElementsByTagName('meta').url // metaHtml = '<meta name="url" content="www.google.com" />'
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.