prototypejs - 通过prototype.js 将iframe 附加到div

Question

我正在使用prototype.js。我想在单击Div 时附加一个I 帧。为此，我正在使用以下代码。

//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 */
}

​</p>