通過prototype.js追加一個iframe到一個div

Question

我正在使用prototype.js.我想追加一個I幀在Div.for我點擊使用下面的代碼。

//JS Code 
Event.observe(window, 'load', function() 
{ $('test').observe('click', function() 
    { 
    $('d1').update ('<iframe src="http://www.abc.com" width="100%" height="300px;" border="0" id="myframe"></iframe>'); 
    Effect.toggle('d1','slide'); return false; 
    }); 
}); 

這是工作正常，但問題是，我想呈現iframe和圖片將是隱藏的iframe時完全加載之前加載顯示圖像。 爲此我想調用一個回調函數，但我對此沒有任何意見。 請幫我，我該怎麼做。

Answer 1

這裏有一種方法：

的JavaScript：

Event.observe('test', 'click', function(event) { 
    $('d1').addClassName('loading').update('<iframe src="http://www.abc.com/" width="100%" height="1" border="0" id="myframe" onload="this.setAttribute(\'height\', 300);$(\'d1\').removeClassName(\'loading\')"></iframe>'); 
    event.stop(); 
});​​ 

HTML：

<a href="#" id="test">Test</a> 

<div id="d1"></div>​ 

一些CSS：

#d1 { 
    height: 300px; 
    background-color: #ccc; 
} 
#d1.loading { 
    background-color: #c00; 
    /* put your background loading image as a background-image here */ 
}