1

私が欲しいもの

AJAX を使用してサーバー側から HTML のフラグメントを読み込んでおり、それをドキュメントに追加しています。フラグメントが完全に DOM に追加されたときに通知を受け取る方法が必要です。

私はこのようなことをしています:

// Load photos.html from the server with ajax
var instance = loadPageWithAjax('photos.html')

// Wait for response
instance.success = function(response){
   // Create Parent Object
   // Note that I MUST create a new div in my project
   var box = document.createElement('div');
       box.id = 'photos-box';

   // Insert html response to the box's innerHTML
   box.innerHTML = response;

   // Append box to the dom
   document.body.appendChild(box);
}

そして、フラグメントがDOMに追加されたら、そのコンテンツを操作したいのですが、フラグメントが実際にいつDOMに追加されたのかわからないため、できません。

私が試したこと

応答の後にスクリプトを追加しようとしました:

document.getElementById('photo-box') = response 
                                     + '<script>alert(\'loaded\')</script>';

追加されましたが、スクリプトとして読み込まれません。なぜなのかよくわかりません。

次に、部分的に機能する新しいオブジェクトとして追加しようとしました:

var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = 'alert(\'loaded\')';
document.getElementById('photo-box').appendChild(script);

ただし、フラグメントの他の部分よりも高速に読み込まれます。

では、フラグメントが dom に追加されたときに通知を受け取る正しい方法は何でしょうか?

4

2 に答える 2

1

innerHTMLセッターとメソッドappendChildは同期的であるため、DOM はすぐに更新されます。

すべてのスタイルシートと画像がロードされたときに通知を受けたいと思うでしょう。(innerHTML はスクリプトでは機能しません)

これは少しトリッキーです。すべての画像を反復処理してloaded状態を確認し、onload読み込まれていない各画像にハンドラーを追加する必要があります。
スタイルシートの場合はさらに複雑です。可能な実装については、yepnope.jsを参照してください。

于 2011-11-23T18:16:42.440 に答える
0

申し訳ありませんが、十分に理解できていませんがinstance.success = function(response){}、応答を受信した後に が起動された場合、 の後に関数を呼び出すことができるはず document.body.appendChild(box)です。

于 2011-11-23T17:22:16.223 に答える