web-dev-qa-db-ja.com

JavaScriptを使用してメタタグから情報を取得するにはどうすればよいですか？

必要な情報はメタタグにあります。 "content"のときにメタタグのproperty="video"データにアクセスするにはどうすればよいですか？

HTML：

<meta property="video" content="http://video.com/video33353.mp4" />
javascripthtmlgreasemonkeymeta-tags
105
supercoolville

これを使用できます：

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

他の答えはおそらくトリックを行うはずですが、これはより簡単であり、jQueryを必要としません：

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

ここで読みにくい答えがたくさん。ここに1つのライナー

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

より簡単な方法があります：

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

このように使用されます：

getMetaContentByName("video");

このページの例：

getMetaContentByName("Twitter:domain");
15
devMariusz

JQueryを使用する場合、次を使用できます。

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

Jqueryでは、これを次の方法で実現できます。

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

JavaScriptでは、次の方法でこれを実現できます。

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

方法-[ 1 ]

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

エラーが発生する場合があります：TypeErrorをキャッチできません：nullのプロパティ 'getAttribute'を読み取れません

方法-[ 2 ]

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

エラーが発生する場合があります：TypeErrorをキャッチできません：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を取得します。これは良いことです。

4
Юрий Светлов

このコードは私のために働く

<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
muTheTechie
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;
}
2
Vanilla

私は個人的にそれらを1つのオブジェクトハッシュで取得することを好み、その後どこからでもアクセスできます。これは、注入可能な変数に簡単に設定でき、その後、すべてがそれを持ち、一度しか取得できませんでした。

関数をラップすることにより、これは1つのライナーとしても実行できます。

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta によるFYIグローバル属性は有効です。つまり、id属性はgetElementByIdで使用できます。

0
jmoz

メタタグのコンテンツを返し、結果をメモして、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 */

そして、これは open graph tags をクエリし、 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"
0
cssimsek