我需要的信息在一个元标签中。当属性=“视频”时,我如何访问元标签的“内容”数据?
HTML:
<meta property="video" content="http://video.com/video33353.mp4" />
我需要的信息在一个元标签中。当属性=“视频”时,我如何访问元标签的“内容”数据?
HTML:
<meta property="video" content="http://video.com/video33353.mp4" />
当前回答
下面是一个函数,它将返回任何元标记的内容并记住结果,避免不必要的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"
其他回答
<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>
Demo
如果你使用JQuery,你可以使用:
$("meta[property='video']").attr('content');
其他答案应该可以做到这一点,但这一个更简单,不需要jQuery:
document.head.querySelector("[property~=video][content]").content;
最初的问题使用了带有property=""属性的RDFa标记。对于正常的HTML <meta name=""…>标签,您可以使用如下内容:
document.querySelector('meta[name="description"]').content
路- [1]
function getMetaContent(property, name){
return document.head.querySelector("["+property+"="+name+"]").content;
}
console.log(getMetaContent('name', 'csrf-token'));
你可能会得到错误: 无法读取属性“getAttribute”为空
路- [2]
function getMetaContent(name){
return document.getElementsByTagName('meta')[name].getAttribute("content");
}
console.log(getMetaContent('csrf-token'));
你可能会得到错误: 无法读取属性“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'));
而不是得到error,得到null,这很好。
function getMetaContentByName(name,content){
var content = (content==null)?'content':content;
return document.querySelector("meta[name='"+name+"']").getAttribute(content);
}
以这种方式使用:
getMetaContentByName("video");
本页上的例子:
getMetaContentByName("twitter:domain");