JavaScriptでメタタグから情報を取得するにはどうすればよいですか?


136

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

HTML:

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

2
<meta>はではnameなく属性を持っていることに注意してくださいproperty。standard属性を使用する開発者は、ほとんどの回答で提供されるコードを適応させる必要があります。
Jens Bannmann 2017

回答:


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
あなたが本当に望んでいるのは、それらをローカルに定義したままにしておく 'let'です))
2015年

22
あなたがquerySelectorを使用できる場合は、このような何かを行うことができます: document.querySelector("meta[property='og:url']").getAttribute('content')
Nishchalゴータム

3
私はこの答えはそれほど重要ではないと思います、そしてあなたは本当にstackoverflow.com/questions/7524585/を
セルゲイ・バシャロフ'21 / 01/17

この回答をスキップします。OPの[明らかに奇妙な]ケースでは、「プロパティ」属性ではなく「名前」を参照するため、機能しません。そして、現在の状態で、それは非常に複雑が、任意の後方互換性の利点なしだ-サポートする任意のブラウザconst/ letサポートする必要があります.querySelector
natevw

メタ属性が1つだけの場合、なぜ複数回ループするのですか?何百ものメタタグがある場合や、メタ値を複数回取得する必要がある場合があります。
SKR

212

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

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

元の質問では、属性付きのRDFaタグを使用してproperty=""いました。通常のHTML <meta name="" …>タグの場合、次のようなものを使用できます。

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

16
シンプルでエレガントで、依存関係はありません。承認された回答よりも優れています
imo

6
私のメタは<head>タグの中document.head.querySelectorにありますnullが、私に与えてくれましたがdocument.querySelector完璧に機能しました
Robin van Baalen

10
OGタグで機能させるには、次のように引用符を追加します_:var title = document.head.querySelector( '[property = "og:title"]');
arpo

1
ナイス。「[コンテンツ]」の部分の目的は何ですか?それがなければ、私はメタ要素も取得します。
シティキッド

1
@citykidやや不必要に見えます。タグが「プロパティ」で見つからない場合、スニペットは常にTypeErrorをスローします。[content]セレクターに含めると、一致するタグにコンテンツ属性がない場合にその例外が拡張されます。IMOは、その場合、nullの結果を取得する方が理にかなっていますが、実装者の好み次第だと思います。
natevw

93

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

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ではなく、より基本的な「name」属性(の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 errorましundefinedた。エラーが発生した場合にデフォルトでdocument.queryselector取得できるように、変数を割り当ててtryステートメントでラップすることで解決し""ました。
bgmCoder 2016年

function getMetaContentByName(name、content){var content =(content == null)? 'content':content; try {return document.querySelector( "meta [name = '" + name + "']")。getAttribute(content); } catch {は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" />
Chromeでは

1
@samdeV、これはここでのすべてのソリューションの中で最もクリーンです。あなた自身の答えとしてそれを提出してください。:)
frandroid 2015年

1
@samdeV。また、.getAttribute( 'content')を使用する必要はありません。.content:document.getElementsByTagName( 'meta')['video']。content。テストしたところ、Firefoxでも問題なく動作しました。
frandroid 2015年

Safariでは機能しないことが通知されました。畜生。
frandroid 2015年

4

方法 - [ 1 ]

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

エラーが発生する可能性があります:Uncaught TypeError:nullのプロパティ 'getAttribute'を読み取れません


方法 - [ 2 ]

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

エラーが発生する可能性があります:Uncaught 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



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

そして、ここにも拡張グラフがありオープングラフタグをクエリし、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"

1

関数の私のバリアント:

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

0

私は個人的にそれらを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
<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" />'
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.