问题
The information I need is in a meta tag. How can I access the \"content\" data of the meta tag when property=\"video\"?
HTML:
<meta property=\"video\" content=\"http://video.com/video33353.mp4\" />
回答1:
You can use this:
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'));
回答2:
The other answers should probably do the trick, but this one is simpler and does not require jQuery:
document.head.querySelector("[property~=video][content]").content;
回答3:
A lot of hard to read answer here. One liner here
document.querySelector("meta[property='og:image']").getAttribute("content");
回答4:
There is an easier way:
document.getElementsByName('name of metatag')[0].getAttribute('content')
回答5:
function getMetaContentByName(name,content){
var content = (content==null)?'content':content;
return document.querySelector("meta[name='"+name+"']").getAttribute(content);
}
Used in this way:
getMetaContentByName("video");
The example on this page:
getMetaContentByName("twitter:domain");
回答6:
If you use JQuery, you can use:
$("meta[property='video']").attr('content');
回答7:
In Jquery you can achieve this with:
$("meta[property='video']");
In JavaScript you can achieve this with:
document.getElementsByTagName('meta').item(property='video');
回答8:
Way - [ 1 ]
function getMetaContent(property, name){
return document.head.querySelector("["+property+"="+name+"]").content;
}
console.log(getMetaContent('name', 'csrf-token'));
You may get error: Uncaught TypeError: Cannot read property 'getAttribute' of null
Way - [ 2 ]
function getMetaContent(name){
return document.getElementsByTagName('meta')[name].getAttribute("content");
}
console.log(getMetaContent('csrf-token'));
You may get error: Uncaught TypeError: Cannot read property 'getAttribute' of null
Way - [ 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'));
Instead getting error, you get null, that is good.
回答9:
This code works for me
<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);
}
}
Example fiddle: http://jsfiddle.net/muthupandiant/ogfLwdwt/
回答10:
function getDescription() {
var info = document.getElementsByTagName('meta');
return [].filter.call(info, function (val) {
if(val.name === 'description') return val;
})[0].content;
}
update version:
function getDesc() {
var desc = document.head.querySelector('meta[name=description]');
return desc ? desc.content : undefined;
}
回答11:
Here's a function that will return the content of any meta tag and will memoize the result, avoiding unnecessary querying of the 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 */
And here's an extended version that also queries for open graph tags, and uses 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"
回答12:
I personally prefer to just get them in one object hash, then I can access them anywhere. This could easily be set to an injectable variable and then everything could have it and it only grabbed once.
By wrapping the function this can also be done as a one liner.
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;
})();
回答13:
FYI according to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta global attributes are valid which means the id attribute can be used with getElementById.
回答14:
if the meta tag is:
<meta name="url" content="www.google.com" />
JQuery will be:
const url = $('meta[name="url"]').attr('content'); // url = 'www.google.com'
JavaScript will be: (It will return whole HTML)
const metaHtml = document.getElementsByTagName('meta').url // metaHtml = '<meta name="url" content="www.google.com" />'
来源：https://stackoverflow.com/questions/7524585/how-do-i-get-the-information-from-a-meta-tag-with-javascript