CODEWITHSUNDEEP
javascriptjquery
Xara
Xara

Reputation: 21

Refresh button for an iframe jquery or javascript

Hello i have a problem. I have a page in which i have inside an iframe. In the parent page (not in the iframe), i want to build the browser buttons back, fw, refresh and home page. The back, fw, home page buttons are almost ok. The refresh button doesnt work. The code is below:

<a href="javascript:;" onClick="parent.document.getElementById('my_frame').location.reload();">

I also have to tell that my url is not changing i mean i have used post method and the url is always the same. Any answers of jquery or javascript???

Thanks in advence, i m really desperate

Upvotes: 2

Views: 6195

Answers (4)

Peter Bailey
Peter Bailey

Reputation: 105914

Ok, let's cover some ground rules first

  1. To get access to a frame's window object, go through the frames collection.
  2. Give your frame a name
  3. If parts of your UI don't work without javascript enabled, then don't put them in the markup - add them with javascript
  4. Don't use anchor elements for controls that aren't hyperlinks

In practice: 

<html>
<head>
  <title>Test Page</title>

  <style type="text/css">
    #toolbar button {
      cursor: pointer;  
    }
  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">  

  $(function()
  {
    var $iframe  = $( '#my_frame' );
    var $toolbar = $( '<div/>' ).attr( 'id', 'toolbar' );
    var frame    = self.frames['my_frame'];

    $toolbar.append(
      $('<button/>')
      .text( 'Home' )
      .click( function( event )
      {
        event.preventDefault();
        frame.location.href = 'http://www.google.com';
      } )
    );

    $toolbar.append(
      $('<button/>')
      .text( 'Back' )
      .click( function( event )
      {
        event.preventDefault();
        history.back();
      } )
    );

    $toolbar.append(
      $('<button/>')
      .text( 'Forward' )
      .click( function( event )
      {
        event.preventDefault();
        frame.history.forward();
      } )
    );

    $toolbar.append(
      $('<button/>')
      .text( 'Refresh' )
      .click( function( event )
      {
        event.preventDefault();
        frame.location.reload();
      } )
    );

    $toolbar.insertBefore( $iframe );

  } );

  </script>
</head>

<body>

  <iframe id="my_frame" name="my_frame" width="400" height="300" src="http://www.google.com"></iframe>

</body>
</html>

Upvotes: 3

jwueller
jwueller

Reputation: 31006

Try the following:

var iframe = document.getElementById('your-iframe');
iframe.src = iframe.src;

Upvotes: 0

2ndkauboy
2ndkauboy

Reputation: 9397

Why don't you do it like this:

<a href="javascript:document.getElementById('my_frame').location.reload();">

You don't need a onclick if you already have a href with no other target.

Upvotes: 0

fehays
fehays

Reputation: 3167

Have you tried this: http://www.byronsorrells.com/web-development/reloading-an-iframe-with-jquery/

$(".reloadAds").click(function() {
        jQuery.each($("iframe"), function() {
            $(this).attr({
                src: $(this).attr("src")
            });
        });
        return false;
    });

Upvotes: 0

Related Questions