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

通过prototype.js将iframe附加到div

1 个答案: