Informacje, których potrzebuję, znajdują się w metatagu. Jak mogę uzyskać dostęp do "content"
danych metatagu, kiedy property="video"
?
HTML:
<meta property="video" content="http://video.com/video33353.mp4" />
javascript
html
greasemonkey
meta-tags
supercoolville
źródło
źródło
<meta>
ma miećname
atrybut, a nieproperty
. Programiści używający standardowego atrybutu będą musieli dostosować kod podany w większości odpowiedzi.Odpowiedzi:
Możesz użyć tego:
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'));
źródło
document.querySelector("meta[property='og:url']").getAttribute('content')
const
/let
powinny obsługiwać.querySelector
!Inne odpowiedzi prawdopodobnie powinny załatwić sprawę, ale ta jest prostsza i nie wymaga jQuery:
document.head.querySelector("[property~=video][content]").content;
Oryginalne pytanie zawierało tag RDFa z
property=""
atrybutem. W przypadku normalnych<meta name="" …>
tagów HTML możesz użyć czegoś takiego:document.querySelector('meta[name="description"]').content
źródło
document.head.querySelector
dała mi,null
aledocument.querySelector
działała idealnie[content]
w selektorze rozszerza ten wyjątek na przypadek, w którym dowolny pasujący znacznik nie ma atrybutu treści. IMO w takim przypadku bardziej sensowne jest uzyskanie wyniku zerowego, ale myślę, że zależy to od preferencji implementującego.Tutaj jedna wkładka
document.querySelector("meta[property='og:image']").getAttribute("content");
źródło
Jest łatwiejszy sposób:
document.getElementsByName('name of metatag')[0].getAttribute('content')
źródło
document.querySelector
Wersja działa przez całą drogę do IE8, więc jest mnóstwofunction getMetaContentByName(name,content){ var content = (content==null)?'content':content; return document.querySelector("meta[name='"+name+"']").getAttribute(content); }
Używane w ten sposób:
getMetaContentByName("video");
Przykład na tej stronie:
getMetaContentByName("twitter:domain");
źródło
type error
as,undefined
ponieważ brakowało samego metatagu. Rozwiązałem to, przypisując zmienną i zawijającdocument.queryselector
instrukcję try, dzięki czemu mogłem""
domyślnie uzyskać w przypadku błędu.Jeśli używasz JQuery, możesz użyć:
$("meta[property='video']").attr('content');
źródło
W Jquery możesz to osiągnąć poprzez:
$("meta[property='video']");
W JavaScript możesz to osiągnąć poprzez:
document.getElementsByTagName('meta').item(property='video');
źródło
document.getElementsByTagName('meta')['video'].getAttribute('content');
jeśli znaczniki są takie jak poniżej:<meta name="video" content="http://video.com/video33353.mp4" />
Droga - [ 1 ]
function getMetaContent(property, name){ return document.head.querySelector("["+property+"="+name+"]").content; } console.log(getMetaContent('name', 'csrf-token'));
Może pojawić się błąd: Uncaught TypeError: Cannot read property „getAttribute” of null
Droga - [ 2 ]
function getMetaContent(name){ return document.getElementsByTagName('meta')[name].getAttribute("content"); } console.log(getMetaContent('csrf-token'));
Może pojawić się błąd: Uncaught TypeError: Cannot read property „getAttribute” of null
Droga - [ 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'));
Zamiast otrzymywać błąd,
null
to dobrze.źródło
Prosty, prawda?
document.head.querySelector("meta[property=video]").content
źródło
Ten kod działa dla mnie
<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); } }
Przykładowe skrzypce: http://jsfiddle.net/muthupandiant/ogfLwdwt/
źródło
function getDescription() { var info = document.getElementsByTagName('meta'); return [].filter.call(info, function (val) { if(val.name === 'description') return val; })[0].content; }
wersja aktualizacji:
function getDesc() { var desc = document.head.querySelector('meta[name=description]'); return desc ? desc.content : undefined; }
źródło
Mój wariant funkcji:
const getMetaValue = (name) => { const element = document.querySelector(`meta[name="${name}"]`) return element?.getAttribute('content') }
źródło
Oto funkcja, która zwróci zawartość dowolnego metatagu i zapamięta wynik, unikając niepotrzebnego odpytywania 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 */
A oto wersja rozszerzona, która również pyta o tagi otwartego grafu i używa 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"
źródło
Osobiście wolę uzyskać je w jednym skrócie obiektu, wtedy mam do nich dostęp w dowolnym miejscu. Można to łatwo ustawić na zmienną do wstrzykiwania, a potem wszystko może to mieć i tylko raz.
Dzięki owinięciu funkcji można to również zrobić jako jedną wkładkę.
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; })();
źródło
FYI zgodnie z https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta atrybuty globalne są prawidłowe, co oznacza, że
id
atrybut może być używany zgetElementById
.źródło
<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>
Próbny
źródło
Jeśli jesteś zainteresowany bardziej dalekosiężnym rozwiązaniem do pobierania wszystkich metatagów, możesz użyć tego fragmentu kodu
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());
źródło
jeśli metatag to:
<meta name="url" content="www.google.com" />
JQuery będzie:
const url = $('meta[name="url"]').attr('content'); // url = 'www.google.com'
JavaScript będzie: (Zwróci cały HTML)
const metaHtml = document.getElementsByTagName('meta').url // metaHtml = '<meta name="url" content="www.google.com" />'
źródło