1

我正在使用最新版本的 Opera。它支持 Microdata API，但是当我键入以下代码时，它不起作用。

<head>
<script type="text/javascript">
        var user = document.getItems('http://schema.org/Person')[0];
        alert('Hi there ' + user.properties['name'][0].textContent + '!');
        function supports_microdata_api() {
             return !!document.getItems;
        }
        alert(supports_microdata_api());
        </script>
    </head>
<body>
<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Fatima Zohra</span>
  <img src="" itemprop="image" />
</div>

谁能告诉我我做错了什么？

4

1 回答 1

2

您需要等到页面加载；你在呼唤一些东西：

document.getItems('http://schema.org/Person')[0]

那还不是 DOM 的一部分；您的代码在 DOM 知道“尚未见过”的元素之前运行。

用于window.onload等待页面onload事件触发，该事件在元素被解析后发生。

window.onload = function(){
    var user = document.getItems('http://schema.org/Person')[0];
    console.log(user);
    console.log('user.properties Name: ' + user.properties['name'][0].textContent);
    function supports_microdata_api() {
        return !!document.getItems;
    }
    console.log(supports_microdata_api());
};

http://jsfiddle.net/eY63s/2/

或者，也可以按页面顺序将代码放在 DOM 元素之后。

一种更现代的方法是使用事件委托：

window.addEventListener('load', function(){
    var user = document.getItems('http://schema.org/Person')[0];
    console.log(user);
    console.log('user.properties Name: ' + user.properties['name'][0].textContent);
    function supports_microdata_api() {
        return !!document.getItems;
    }
    console.log(supports_microdata_api());
});

http://jsfiddle.net/eY63s/3/

尽管至少支持早期版本的 IE element.attachEvent，但IE9 或更高版本的浏览器确实/将支持element.addEventListener.

这是检查和调用方法的更安全的方法：

window.addEventListener('load', function(){
    var user;

    function supports_microdata_api() {
        return !!document.getItems;
    }

    console.log('Microdata support: ' + supports_microdata_api());

    if (supports_microdata_api()) {
        user = document.getItems('http://schema.org/Person')[0];
        console.log(user);
        console.log('user.properties Name: ' + user.properties['name'][0].textContent);
    }
});

http://jsfiddle.net/eY63s/4/

注意var user匿名函数内部的使用，它创建一个闭包并防止user逃逸到全局范围。这是一种处理变量的“更好”方式，可以帮助防止它们由于全局共享而被意外覆盖。另一方面，您将无法user从该范围之外调用。但是，请抵制将其推向全球范围的冲动，这可能更容易，但却是一个坏习惯，并且有时容易出现难以发现的错误。

于 2012-08-05T13:13:20.993 回答