2010-08-24 18 views
7

¿Cómo puedo volver a cargar iframe utilizando jquery?Ajax Recargar iframe

<html> 

<head> 
<script type="text/javascript" src="jquery-1.4.2.js" > </script> 


<script type="text/javascript"> 
//Reload Iframe Function  
</script> 

</head> 

<body> 
    <iframe name="f1" id = "f1" src="http://www.google.com.pk/search?q=usa+current+time&ie=utf-8&oe=utf-8&aq=t&client=firefox-a&rlz=1R1GGLL_en" width=500px height=250px> 
    </iframe> 

<button onClick="abc()"> Reload </button> 

</body> 

</html> 

Respuesta

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

Este bucle a través cada iFrame cada vez que se hace clic en un enlace con una clase de reloadAds y establecer la fuente del marco flotante a sí

+0

Aquí está mi código: \t Actualizar – Novice

+0

pongo al día, pero veo respuesta @cory es bueno para ti –

11

Basado en su comentario al post de Haim , lo que quiere podría simplificarse como:

$('#reload').click(function() { 
    $('#f1').attr('src', $('#f1').attr('src')); 
    return false; 
}); 

O

$('#reload').click(function() { 
    $('#f1')[0].contentWindow.location.reload(true); 
    return false; 
}); 

Pero quizás sus respuestas se adapten mejor a sus necesidades.

UPDATE:

puse juntos un ejemplo de trabajo utilizando el método I proporcionada anteriormente. Tengo un en una página que muestra otra página que imprime la hora.

El HTML (time.html):

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 
<body> 

    The time is now <span id="time"></span>. 

    <script type="text/javascript"> 

     $(document).ready(function() { 
      $('#time').html((new Date()).toString()); 
     }); 

    </script> 
</body> 

y la página principal HTML (test.html):

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 
<body> 

    <iframe id="frame" src="file:///D:/Users/Cory/Desktop/time.html" width="500" height="250"></iframe> 

    <button id="reload">Refresh</button> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
      $('#reload').click(function() { 
       $('#frame').attr('src', $('#frame').attr('src')); 
       return false; 
      }); 
     }); 

    </script> 
</body> 

Esto funciona muy bien para mí en Firefox 3.6 e IE 7.

+0

¡Gracias por tu respuesta! He intentado con tu código, pero desafortunadamente no funciona. Actualizar – Novice

+0

Es posible que desee colocar grandes comentarios como estos como cambios a su puesto original. Por favor vea mi actualización en mi respuesta para un ejemplo de trabajo. –