Updating contents of IFrame using JQuery

Now a new challenge !!!

Updating the contents of iframe using jquery, sounds easy as jquery by default provides the option as follows:-

$("#iframe1").contents()

Now that you are able to retrieve the contents, updating data is quite easy. for eg:-

$("#iframe1").contents().find("#mydiv").css("background-color","red");

In order to update the contents of #mydiv in iframe1 first iframe1 should be loaded with another page. Its all seems fine now. Ok but the hard bit is
- No default src provided
- replace the content of iframe completely not just some specific elements

Why not just use standard html method provided by jquery as

$("#iframe1").contents().html('
Test
);

Yes its easy, but no it does not work. Just a small change to make this work.

$("#iframe1").contents().find('html').html('
Test
');

Also another advantage of this is jquery extenstions or plugins work just as easy. For example using highlight plug-in would be

$('#iframe1').contents().find('html').highlight('test');
  $('#iframe1').contents().find('html').find('.highlight').css('background-color', 'yellow');

Hope this should have save some of your time.

The first rule of intelligent tinkering is to keep all the pieces.

Aldo Leopold