¿Hay una manera de hacer que los enlaces normales se cargan automáticamente a través de ajax, en lugar de lo normal?

StackOverflow https://stackoverflow.com/questions/1449074

Pregunta

No he explicado bien.

Pero lo que quiero decir es, si tengo un script ajax que carga el contenido de una página en un elemento DIV, a través de la función 'LoadPage (' whatever.php ') ;, en lugar de dar la vuelta manualmente haciendo esto para todos enlaces, hay una manera de tener un script que hace que automáticamente todos los enlaces regulares de carga a través de que la función ajax?

Al igual que en Facebook, su perfil se carga a través de ajax, sin embargo, si nos fijamos en su código, que sólo tienen una de manera regular en el perfil.

Saludos!

¿Fue útil?

Solución

Sin duda, puede hacerlo con jQuery.

Este script pasa por el documento, encuentra todos los elementos de anclaje y se une a un controlador de eventos para el evento click de cada uno. Cuando se hace clic en el elemento de anclaje, el controlador de eventos se encuentra el atributo href y cargas de esa página en #targetDiv (se puede llamar a este div lo que quiera, por supuesto). 

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
  $("a").click(function() {
    $("#targetDiv").load(($(this).attr("href") + " body");
    return false;
  });
});
</script>

...

<!-- In your document body, this is the div you'd load the pages into. -->
<div id="targetDiv"></div>

Otros consejos

Puede utilizar jQuery para esto (si entiendo su pregunta correcta).

En primer lugar puede hacer que el LoadPage función () de la siguiente manera: 

function loadpage(divId, url) {
    $('#' + divId).load(url);

    return false;
}

.load () no es compatible con todos los navegadores sin embargo. Si desea hacer esto sin .load (), entonces usted puede comprobar fuera de .get (). Para obtener más información sobre .load (), echar un vistazo a http://docs.jquery.com/Ajax / cargar

Estoy asumiendo que sería algo como esto: 

$(document).ready(function(){
    $("a").click(function(){
        $("body").load($(this).attr("href") + " body");
        return false;
    });
});

Esto haría que todas las etiquetas <a> en la página de llamar a una función que descarga un documento HTML desde el atributo href de la etiqueta, retirar de él la etiqueta que el cuerpo, y reemplazar el contenido de la etiqueta del cuerpo de la página actual con el contenido de la nueva cuerpo de la etiqueta. De esta manera, es más fácil de resolver esto sin JavaScript, así como integrarlo en un sitio existente.

Para usarlo, se coloca esto en una etiqueta <script> en la cabecera de la página principal, o en un archivo externo de JS.

Tenga en cuenta, sin embargo, que este código sólo actualiza el contenido de la etiqueta <body>, la cabeza (incluyendo la etiqueta del título) se mantiene intacta. Es posible que tenga que añadir código extra para actualizar cosas como esta.

sencillo y bonito. Mira esto: Bjax

Uso: 

<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />

Por último, incluir esto en la cabeza de su html: 

$('a').bjax();

Para más opciones de configuración, la caja de demostración aquí: Bjax demostración

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top