1

私は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 が完全に読み込まれると画像が非表示になります。このために、コールバック関数を呼び出したいのですが、これについてはわかりません。どうすればこれができるか教えてください。

4

1 に答える 1

2

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>

于 2012-06-13T06:04:25.180 に答える