爲什麼這個Javascript會拋出一個錯誤？

我正在使用最新版本的Opera。它支持Microdata API，但是當我鍵入下面的代碼時，它不起作用。爲什麼這個Javascript會拋出一個錯誤？

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

有誰能告訴我我做錯了什麼嗎？

來源

2012-08-05 Fatima Zohra

如果您可以編輯您的問題以添加_actual_錯誤消息而非「無法正常工作」，將會非常有幫助。 – Ben 2012-08-05 13:02:32

使用Opera Developer Tools控制檯，它會引發*未捕獲的異常：TypeError：無法將'user'轉換爲對象。第30行第8列出現錯誤*。 – 2012-08-05 13:08:58

簡單的JS錯誤，與Microdata無關 – 2012-08-07 07:07:54

您需要等待頁面加載;你正在呼籲的東西：

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 or later瀏覽器都/將支持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-05 13:13:20

謝謝，它的工作原理！ :) – 2012-08-06 10:16:01

爲什麼這個Javascript會拋出一個錯誤？

回答

相關問題