답변:
이것을 사용할 수 있습니다 :
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'));
document.querySelector("meta[property='og:url']").getAttribute('content')
const
/ let
지원 하는 모든 브라우저 .querySelector
!
다른 답변은 아마도 트릭을 수행해야하지만 이것은 더 간단하고 jQuery가 필요하지 않습니다.
document.head.querySelector("[property~=video][content]").content;
원래 질문 은 속성이 있는 RDFa 태그를 사용했습니다 property=""
. 일반적인 HTML <meta name="" …>
태그의 경우 다음과 같은 것을 사용할 수 있습니다.
document.querySelector('meta[name="description"]').content
document.head.querySelector
준 null
하지만, document.querySelector
완벽하게 일
[content]
선택기에 포함 하면 일치하는 태그에 컨텐츠 속성이없는 경우로 예외가 확장됩니다. 이 경우 null 결과를 얻는 것이 더 합리적이지만 구현 자의 선호도에 달려 있습니다.
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 문에 래핑하여 ""
오류가 발생할 경우 기본적으로 얻을 수 있도록 해결 했습니다.
JQuery를 사용하는 경우 다음을 사용할 수 있습니다.
$("meta[property='video']").attr('content');
Jquery에서는 다음을 사용하여이를 달성 할 수 있습니다.
$("meta[property='video']");
JavaScript에서는 다음을 사용하여이를 달성 할 수 있습니다.
document.getElementsByTagName('meta').item(property='video');
document.getElementsByTagName('meta')['video'].getAttribute('content');
<meta name="video" content="http://video.com/video33353.mp4" />
길 - [ 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
좋습니다.
이 코드는 나를 위해 작동합니다
<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);
}
}
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;
}
다음은 메타 태그의 내용을 반환하고 결과를 기억하여 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"
개인적으로 하나의 객체 해시로 가져 오는 것을 선호하며 어디서나 액세스 할 수 있습니다. 이것은 쉽게 주사 가능한 변수로 설정 될 수 있으며 모든 것이 가질 수 있으며 한 번만 잡을 수 있습니다.
함수를 래핑하여 하나의 라이너로도 수행 할 수 있습니다.
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;
})();
참고 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta 전역 속성 에 따르면 id
속성을 사용할 수 있습니다getElementById
.
<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>
모든 메타 태그를 얻기 위해 더 광범위한 솔루션에 관심을 가지고 있다면이 코드를 사용할 수 있습니다
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());
메타 태그가 다음과 같은 경우 :
<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" />'
<meta>
이 가정된다name
, 속성을하지property
. 표준 속성을 사용하는 개발자는 대부분의 답변에서 제공 한 코드를 수정해야합니다.