Blogger Widgets
  • Sharing Photos using SignalR
  • TFS Extenstion - allows copy work items between projects
  • Displaying jquery progressbar with ajax call on a modal dialog
  • Managing windows services of a server via a website
  • Exploring technologies available to date. TechCipher is one place that any professional would like to visit, either to get an overview or to have better understanding.

Search This Blog

Friday, 22 October 2010

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

1 comments:

  1. We all know that we need some entertainments to help us relax ourselves,if you are interested in playing World Of Warcraft,and want to know more things about http://www.mmolive.com/ and http://www.mmohome.com/gold/Maple-Story-US.html,you can come to our home to enjoy more happy.

    ReplyDelete

Copyright © 2013 Template Doctor . Designed by Malith Madushanka - Cool Blogger Tutorials | Code by CBT | Images by by HQ Wallpapers