Append a iframe to a div by prototype.js

Question

I am using prototype.js.I want to append a I-frame on a click on Div.for this I am using following code.

//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;
  });
});

This is working fine but the problem is that I want to show loading image before rendering the iframe and image will be hide when iframe loaded completely. For this I want to call a callback function.but I don't have any idea about this. Please help me how can I do this.

score 2 · Accepted Answer · answered Jun 13 '12 at 06:04

2

Here's one way:

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>

Some CSS:

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

answered Jun 13 '12 at 06:04

artlung

33,305
16
69
121

yes dude!this is the way.I have already in this way.I have called a java script function onload attribue of iframe as you have done. ): – mjdevloper Jun 13 '12 at 07:12
This solution only worked for me in FF. I realized I had problems with headers, so this solution worked for me at the end http://stackoverflow.com/a/4646947/318380 – jazkat Jan 30 '14 at 14:28

Append a iframe to a div by prototype.js

1 Answers1