Handling meta data with Javascript
Question
I am trying to read meta data from an html page using JavaScript. I created an array of all the meta tags and I am trying to read the property field, but I cant seem to get it to work. Here is the console:
>meta[6]
<meta property="og:image" content="http://www. example.com/img/1.png">
>meta[6].property
undefined
>meta[6].content
"http://www. example.com/img/1.png"
How am I able to access the content but not the property field and how can I get the property?
3 answers
solution1
4 2011-05-24 05:12:51
To answer the question:
"How am I able to access the content but not the property field"
content is a standard attribute of the HTML meta element , so browsers will create an equivalent DOM property for the related DOM meta element.
property is not a standard attribute for the HTML meta element , so some browsers will not create a similar property (eg Firefox), while other browsers (eg IE) will. Therefore getAttribute should be used for any non-standard attribute value, but direct DOM property access should be used for the values of standard attributes.
As a general rule, you should not use non-standard attributes on HTML elements, then you can always access values using DOM properties (which is the most appropriate method for HTML DOM elements).
Note that the HTML5 meta element is the same as the HTML 4.01 element linked to above, however the HTML 4 spec is probably the better one to use on the general web for the time being. HTML5-specific code should really only be used when targetting the HTML5 features of a particular browser.
solution2
3 2011-10-19 23:51:17
Here is a complete working example..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Cross-Window HTML</title>
<meta property="og:title" content="Share Title" />
<meta property="og:description" content="Share Page Description" />
<meta property="og:image" content="Path to Share Image" />
<link rel="canonical" href="http://127.0.0.1/newWindowWrite.html" />
<script type="text/javascript">
function GetMetaValue(meta_name) {
var my_arr = document.getElementsByTagName("meta");
for (var counter = 0; counter < my_arr.length; counter++) {
console.log(my_arr[counter].getAttribute('property'));
if (my_arr[counter].getAttribute('property') == meta_name) {
return my_arr[counter].content;
}
}
return "N/A";
}
function newHTML() {
HTMLstring = '<html>\n';
HTMLstring += '<head>\n';
HTMLstring += '<title>Google +1</title>\n';
HTMLstring += '<meta property="og:title" content="' + GetMetaValue('og:title') + '"/>\n';
HTMLstring += '<meta property="og:description" content="' + GetMetaValue('og:description') + '"/>\n';
HTMLstring += '<meta property="og:image" content="' + GetMetaValue('og:image') + '"/>\n';
HTMLstring += '<link rel="canonical" href="' + location.href + '"/>\n';
HTMLstring += '</head>\n';
HTMLstring += '<body>\n';
HTMLstring += '<div id="shareContent">\n';
HTMLstring += '</div>\n';
HTMLstring += '</body>\n';
HTMLstring += '</html>';
console.log(HTMLstring);
newwindow = window.open();
newdocument = newwindow.document;
newdocument.write(HTMLstring);
newdocument.close();
}
</script>
</head>
<body>
<div onclick="newHTML();">Spawn Sharing Window</div>
</body>
</html>
solution3
2 ACCPTED 2011-05-24 03:33:05
you want the getAttribute function:
>meta[6].getAttribute('property');
"og:image"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.