JavaScript로 메타 태그에서 정보를 얻으려면 어떻게해야합니까?


136

필요한 정보는 메타 태그에 있습니다. "content"메타 태그 의 데이터에 액세스하려면 어떻게 property="video"해야합니까?

HTML :

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

2
참고 <meta>이 가정된다 name, 속성을하지 property. 표준 속성을 사용하는 개발자는 대부분의 답변에서 제공 한 코드를 수정해야합니다.
Jens Bannmann

답변:


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
당신이 정말로 원하는 것은 로컬 정의를 유지하도록하는 것입니다;)
tommed

22
querySelector를 사용할 수 있다면 다음과 같이 할 수 있습니다 : document.querySelector("meta[property='og:url']").getAttribute('content')
Nishchal Gautam

3
나는이 답변이 더 관련성이 없다고 생각하고 실제로 stackoverflow.com/questions/7524585/…
Sergei Basharov

이 답변을 건너 뛰십시오. OP 속성은 "property"속성이 아닌 "name"속성을보기 때문에 작동하지 않습니다. 현재 상태에서는 지나치게 복잡하지만 이전 버전과의 호환성 이점이 없습니다. 지원 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.querySelectornull하지만, document.querySelector완벽하게 일
로빈 반 Baalen을

10
OG 태그로 작업하려면 다음과 같이 따옴표를 추가하십시오. var title = document.head.querySelector ( '[property = "og : title"]');
arpo

1
좋은. "[content]"부분은 어떤 목적으로 사용됩니까? 그것 없이는 메타 요소도 얻습니다.
citykid

1
@citykid 다소 불필요한 것 같습니다. 스 니펫은 "속성"에서 태그를 찾지 못하면 항상 TypeError를 발생시킵니다. [content]선택기에 포함 하면 일치하는 태그에 컨텐츠 속성이없는 경우로 예외가 확장됩니다. 이 경우 null 결과를 얻는 것이 더 합리적이지만 구현 자의 선호도에 달려 있습니다.
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까지
완벽

이는 일반적으로 좋은 방법이지만 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 error으로 undefined자체가 실종 된 메타 태그 때문이다. 변수를 할당하고 document.queryselectortry 문에 래핑하여 ""오류가 발생할 경우 기본적으로 얻을 수 있도록 해결 했습니다.
bgmCoder

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

15

JQuery를 사용하는 경우 다음을 사용할 수 있습니다.

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

9
jquery 또는 일부 라이브러리를 가정합니다. 자바 스크립트 아님
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

1
@samdeV, 또한 .getAttribute ( 'content')가 필요하지 않습니다. .content : document.getElementsByTagName ( 'meta') [ 'video']. content 만 가능합니다. 방금 테스트했는데 Firefox에서도 제대로 작동합니다.
frandroid

Safari에서 작동하지 않는다는 알림을 받았습니다. 젠장
frandroid

4

- [ 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좋습니다.



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

개인적으로 하나의 객체 해시로 가져 오는 것을 선호하며 어디서나 액세스 할 수 있습니다. 이것은 쉽게 주사 가능한 변수로 설정 될 수 있으며 모든 것이 가질 수 있으며 한 번만 잡을 수 있습니다.

함수를 래핑하여 하나의 라이너로도 수행 할 수 있습니다.

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.