如何使用 JavaScript 从元标记中获取信息？

Question

我需要的信息位于元标记中。当

"content"

时，如何访问元标记的

property="video"

数据？

HTML：

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

Answer 1

其他答案可能应该可以解决问题，但是这个更简单并且不需要 jQuery：

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

最初的问题使用了带有 property="" 属性的

RDFa

标签。对于普通的 HTML

<meta name="" …>

标签，您可以使用类似以下内容：

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

Answer 2

您可以使用这个：

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

Answer 3

这里有一个班轮

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

Answer 4

有一个更简单的方法：

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

Answer 5

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

这样使用：

getMetaContentByName("video");

本页示例：

getMetaContentByName("twitter:domain");

Answer 6

如果你使用JQuery，你可以使用：

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

Answer 7

在 Jquery 中你可以通过以下方式实现：

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

在 JavaScript 中，您可以通过以下方式实现此目的：

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

Answer 8

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

这样你就可以获取meta的内容了。

Answer 9

路 - [ 1 ]

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

您可能会收到错误：未捕获的类型错误：无法读取 null 的属性“getAttribute”

路 - [ 2 ]

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

您可能会收到错误：未捕获的类型错误：无法读取 null 的属性“getAttribute”

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

，而不是出现错误，这很好。

Answer 10

很简单吧？

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

Answer 11

我的函数变体：

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

Answer 12

此代码对我有用

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

Answer 13

这是一个函数，它将返回任何元标记的内容并记住结果，避免不必要的 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 */

这是一个扩展版本，它还查询开放图形标签，并使用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"

Answer 14

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

Answer 15

将所有元值复制到缓存对象：

/* <meta name="video" content="some-video"> */

const meta = Array.from(document.querySelectorAll('meta[name]')).reduce((acc, meta) => (
  Object.assign(acc, { [meta.name]: meta.content })), {});

console.log(meta.video);

Answer 16

如果您对更深远的解决方案感兴趣以获取所有元标记，您可以使用这段代码

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

Answer 17

首选简单的方法

我们可以直接使用一行来获取元描述或关键字或头部中的任何元标记，如以下代码：

document.head.getElementsByTagName('meta')['description'].getAttribute('content');

只需将 ['description'] 更改为关键字或元名称 rang 的元素

这是一个例子：

Answer 18

我个人更喜欢将它们放入一个对象哈希中，然后我可以在任何地方访问它们。这可以很容易地设置为可注入变量，然后所有东西都可以拥有它，并且只抓取一次。

通过包装函数，这也可以作为一个衬垫完成。

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

Answer 19

仅供参考，根据 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta 全局属性是有效的，这意味着

id

属性可以与
getElementById
一起使用。

Answer 20

使用

meta

root，然后获取和设置其任何属性：

let meta = document.getElementsByTagName('meta')

console.log(meta.video.content)
> "http://video.com/video33353.mp4"

meta.video.content = "https://www.example.com/newlink"

Answer 21

复杂网站和元数据的问题是元标记并不总是具有 itemprop 属性。在某些情况下，它们只有 itemprop 但没有 name 属性。

使用此脚本，您可以获取所有具有 itemprop 属性的元并打印其内容。

  const allMeta = document.getElementsByTagName("meta");
    
  for (let i = 0; i < allMeta .length; i++) {
      if( allMeta [i].getAttribute("itemprop") != null){
        console.log( allMeta [i].getAttribute("itemprop")+":"+allMeta [i].getAttribute('content') );
      }
  }

Answer 22

使用 vanilla-js 非常简单...

var author = document.querySelector("meta[name=author]").content;
alert(`My author is ${author}`);

Answer 23

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

演示

Answer 24

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

Answer 25

如果元标记是：

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

如何使用 JavaScript 从元标记中获取信息？

问题描述投票：0回答：25

25个回答

最新问题

如何使用 JavaScript 从元标记中获取信息？

问题描述 投票：0回答：25

25个回答

最新问题

问题描述投票：0回答：25