marcos Simulación con carga jQuery() y pushState()

tl; Resumen dr: método de jQuery load() denominan como:marcos Simulación con carga jQuery() y pushState()

$('#foo').load('similar.html #foo')

resultados en la estructura DOM de:

<div id="foo"> 
    <div id="foo">…</div> 
</div>

¿Cuál es la derecha forma de intercambiar una parte de una página con la parte equivalente en una página similar utilizando jQuery que no dobla la envoltura?

Quiero crear un sitio que:

Tiene sitio en consonancia 'con bordes' en torno a todas las páginas (de cabecera, barra lateral de navegación, cuadro de búsqueda, etc.).
Intercambia el 'contenido' del sitio durante la navegación (todo el cromo es persistente).
Proporciona la experiencia Historial y marcador de navegación estándar.

enter image description here

no quiero utilizar marcos debido a # 3, y también porque quiero que el contenido constante para solapar el contenido dinámico (tenga en cuenta los resultados de búsqueda persistentes en rosa superponer el contenido).

Así, cada página en el sitio tendrá una estructura similar a la siguiente cáscara abreviada:

<html><head><title>NAME</title>…</head><body> 
    <div id="chrome">…</div> 
    <div id="content">…</div> 
</body></html>

Usando jQuery puedo interceptar el menú de navegación y de búsqueda y utilizar AJAX para cargar la página y reemplazar sólo el contenido . Y puedo usar history.pushState() para realizar la actualización barra de direcciones de una manera navegable y bookmarkable:

$('#nav a').click(function(e){ 
    var url = this.href; 
    $('#content').load(url+" #content",function(html){ 
    var title = /<title>(.+?)<\/title>/i.exec(html)[1]; 
    history.pushState({},title,url); 
    $('title').html(title); 
    }); 
    e.preventDefault(); 
});

se necesita código adicional para manejar adecuadamente hacia adelante y hacia atrás a través de la historia; estos son irrelevantes para la pregunta.

Sin embargo, los anteriores resultados de código en el DOM tiene:

<div id="content"> 
    <div id="content">contents from other page</div> 
</div>

¿Hay una mejor manera de evitar esta duplicación ilegal de id aparte de cambiar toda mi margen de beneficio a ...

<div id="content-wrap"><div id="content">…</div></div>

y el JS a ...

$('#content-wrap').load(url+" #content",…);

Fuente

2011-12-16 Phrogz

En lugar de utilizar .load() que carga automáticamente la respuesta del servidor en el elemento seleccionado (usando .html()), puede utilizar una solicitud $.get() y filtrar la respuesta del servidor para incluir sólo el innerHTML de la respuesta:

$.get('similar.html', function (serverResponse) { 
    var filter = $(serverResponse).filter('#foo').html(); 
    $('#foo').html(filter); 
});

He aquí una demostración: http://jsfiddle.net/QRBaw/

también puede utilizar .children().parent() para seleccionar el elemento #foo en lugar de utilizar .filter() (en caso de que quiera hacer esto de forma dinámica).

ONU-PROBADO

¿Ha tratado de cambiar el selector en su llamada a la función .load() para seleccionar los hijos del elemento #foo?

$('#foo').load('similar.html #foo>*');

Fuente

2011-12-16 00:50:35 Jasper

Iba a esperar más sugerencias antes de lanzar el marcador de aceptación, pero su sugerencia "no probada" funciona de maravilla en mis pruebas locales. ¡Buena esa! – Phrogz

marcos Simulación con carga jQuery() y pushState()

Respuesta

Cuestiones relacionadas