使用 Javascript 处理元数据

Question

我正在尝试使用 JavaScript 从 html 页面读取元数据。 我创建了一个包含所有元标记的数组，我正在尝试读取属性字段，但我似乎无法让它工作。 这是控制台：

>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"

我如何能够访问内容而不是属性字段，以及如何获取属性？

Answer 1

要回答这个问题：

“我如何能够访问内容而不是属性字段”

content是HTML 元元素的标准属性，因此浏览器将为相关的 DOM 元元素创建等效的 DOM 属性。

property不是HTML 元元素的标准属性，因此某些浏览器不会创建类似的属性（例如 Firefox），而其他浏览器（例如 IE）会。 因此getAttribute应该用于任何非标准属性值，而直接 DOM 属性访问应该用于标准属性值。

作为一般规则，您不应在 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. 只有在针对特定浏览器的 HTML5 功能时才应使用 HTML5 特定代码。

Answer 2

这是一个完整的工作示例..

<!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>

Answer 3

你想要getAttribute function：

>meta[6].getAttribute('property');
   "og:image"