La información que necesito está en una metaetiqueta. ¿Cómo puedo acceder a los "content"
datos de la metaetiqueta cuando property="video"
?
HTML:
<meta property="video" content="http://video.com/video33353.mp4" />
La información que necesito está en una metaetiqueta. ¿Cómo puedo acceder a los "content"
datos de la metaetiqueta cuando property="video"
?
HTML:
<meta property="video" content="http://video.com/video33353.mp4" />
Respuestas:
Puedes usar esto:
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
deba admitir .querySelector
!
Las otras respuestas probablemente deberían hacer el truco, pero esta es más simple y no requiere jQuery:
document.head.querySelector("[property~=video][content]").content;
La pregunta original usaba una etiqueta RDFa con un property=""
atributo. Para las <meta name="" …>
etiquetas HTML normales , podría usar algo como:
document.querySelector('meta[name="description"]').content
document.head.querySelector
me dio null
pero document.querySelector
funcionó perfectamente
[content]
en el selector extiende esa excepción al caso en el que cualquier etiqueta coincidente carece de un atributo de contenido. En mi opinión, tiene más sentido en ese caso obtener un resultado nulo, pero creo que depende de la preferencia del implementador.
Mucha respuesta difícil de leer aquí. Un trazador de líneas aquí
document.querySelector("meta[property='og:image']").getAttribute("content");
Hay una manera más fácil:
document.getElementsByName('name of metatag')[0].getAttribute('content')
document.querySelector
versión funciona todo el camino a IE8, por lo que un montón de
function getMetaContentByName(name,content){
var content = (content==null)?'content':content;
return document.querySelector("meta[name='"+name+"']").getAttribute(content);
}
Usado de esta manera:
getMetaContentByName("video");
El ejemplo en esta página:
getMetaContentByName("twitter:domain");
type error
tan undefined
debido a que la etiqueta meta en sí le faltaba. Resolví eso asignando una variable y envolviendo el document.queryselector
en una declaración de prueba para poder obtener ""
por defecto en caso de error.
Si usa JQuery, puede usar:
$("meta[property='video']").attr('content');
En Jquery puedes lograr esto con:
$("meta[property='video']");
En JavaScript puede lograr esto con:
document.getElementsByTagName('meta').item(property='video');
document.getElementsByTagName('meta')['video'].getAttribute('content');
si el marcado es el siguiente:<meta name="video" content="http://video.com/video33353.mp4" />
Camino - [ 1 ]
function getMetaContent(property, name){
return document.head.querySelector("["+property+"="+name+"]").content;
}
console.log(getMetaContent('name', 'csrf-token'));
Puede obtener un error: Error de tipo no capturado: no se puede leer la propiedad 'getAttribute' de nulo
Camino - [ 2 ]
function getMetaContent(name){
return document.getElementsByTagName('meta')[name].getAttribute("content");
}
console.log(getMetaContent('csrf-token'));
Puede obtener un error: Error de tipo no capturado: no se puede leer la propiedad 'getAttribute' de nulo
Camino - [ 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'));
En lugar de obtener un error, obtienes null
, eso es bueno.
Simple, ¿verdad?
document.head.querySelector("meta[property=video]").content
Este código me funciona
<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);
}
}
Violín de ejemplo: http://jsfiddle.net/muthupandiant/ogfLwdwt/
function getDescription() {
var info = document.getElementsByTagName('meta');
return [].filter.call(info, function (val) {
if(val.name === 'description') return val;
})[0].content;
}
Versión actualizada:
function getDesc() {
var desc = document.head.querySelector('meta[name=description]');
return desc ? desc.content : undefined;
}
Aquí hay una función que devolverá el contenido de cualquier metaetiqueta y memorizará el resultado, evitando consultas innecesarias del 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 */
Y aquí hay una versión extendida que también busca etiquetas de gráficos abiertos , y usa 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"
Mi variante de la función:
const getMetaValue = (name) => {
const element = document.querySelector(`meta[name="${name}"]`)
return element?.getAttribute('content')
}
Personalmente prefiero simplemente obtenerlos en un hash de objeto, luego puedo acceder a ellos desde cualquier lugar. Esto podría establecerse fácilmente en una variable inyectable y luego todo podría tenerlo y solo se agarró una vez.
Al ajustar la función, esto también se puede hacer de una sola vez.
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;
})();
Para su información, los atributos globales https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta son válidos, lo que significa que el id
atributo se puede usar congetElementById
.
<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>
Si está interesado en una solución de mayor alcance para obtener todas las metaetiquetas, podría usar este fragmento de código
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());
si la metaetiqueta es:
<meta name="url" content="www.google.com" />
JQuery será:
const url = $('meta[name="url"]').attr('content'); // url = 'www.google.com'
JavaScript será: (devolverá HTML completo)
const metaHtml = document.getElementsByTagName('meta').url // metaHtml = '<meta name="url" content="www.google.com" />'
<meta>
se supone que tiene unname
atributo, noproperty
. Los desarrolladores que utilicen el atributo estándar deberán adaptar el código proporcionado por la mayoría de las respuestas.