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 meta element的标准属性，因此浏览器会为相关的DOM元元素创建一个等效的DOM属性。

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

作为一般规则，您不应在HTML元素上使用非标准属性，然后您始终可以使用DOM属性访问值（这是HTML DOM元素最合适的方法）。

请注意，HTML5 meta element与上面链接的HTML 4.01元素相同，但HTML 4规范可能是暂时在常规网站上使用的更好的规范。实际上，只有在定位特定浏览器的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功能：

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

使用Javascript处理元数据

3 个答案: