Wednesday, January 26, 2011

How to reload an iframe from within its source

Hi,

Today I had a requirement where it was desired that on click of a button an iframe should get re-loaded and that button was within the source of that iframe.

I tried everything else on google, but nothing worked.

Finally I found this and it worked

self.location.reload();

Here is the complete code...

abc.html
=========
<html>
<head>
</head>
<body>
 <iframe src="def.html" id="cartFrame"></iframe><BR><BR>
</body>
</html>


def.html
=========
<html>
 <head>
  <!-- Remember, you must be connected to internet to make it work -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function()
   {
    var d = new Date();
    // set the HTML content of the element with id=time
    $("#time").html(d.getTime());
    
    // define what happens on click of the element with id="download"
    $("#download").click(function()
    {
     // Simply re-load myself :)
     self.location.reload();
    });
    
   });
  </script>
 </head>

 <body>
  <div id="time"></div><BR><BR>
  <button id="download">Download</button>
 </body>
</html>

1 comment: