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 に答える