使用 Javascript 处理元数据
[英]Handling meta data with Javascript
问题描述
I am trying to read meta data from an html page using JavaScript.
我正在尝试使用 JavaScript 从 html 页面读取元数据。 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 个解决方案
解决方案1
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. content是HTML 元元素的标准属性，因此浏览器将为相关的 DOM 元元素创建等效的 DOM 属性。
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. property不是HTML 元元素的标准属性，因此某些浏览器不会创建类似的属性（例如 Firefox），而其他浏览器（例如 IE）会。 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.因此getAttribute应该用于任何非标准属性值，而直接 DOM 属性访问应该用于标准属性值。
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).作为一般规则，您不应在 HTML 元素上使用非标准属性，然后您始终可以使用 DOM 属性访问值（这是 HTML DOM 元素最合适的方法）。
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. 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.只有在针对特定浏览器的 HTML5 功能时才应使用 HTML5 特定代码。
解决方案2
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>
解决方案3
2 已采纳 2011-05-24 03:33:05
you want the getAttribute function:你想要getAttribute function：
>meta[6].getAttribute('property');
"og:image"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.