2009-08-06 10 views
51

tengo una cadena que se parece a:¿Cómo se sustituye la totalidad del nodo HTML con jQuery

<html><head><title>example</title></head><body>some example text</body></html> 

consigo esta cadena devuelve como resultado de una petición AJAX.

Me gustaría que el navegador muestre esa cadena. La idea sería hacer algo como:

$('html').parent().html(myString); 

Bueno, eso no funciona. Intenté usar un IFRAME pero tampoco he encontrado la manera de hacerlo funcionar.

Nota: Me es imposible cambiar esta cadena. También es imposible para mí regenerar esta cadena en una llamada posterior al servidor (de lo contrario, podría simplemente redirigir el navegador a esa url).

+0

Por lo que sé, no hay ningún padre para el elemento 'html', excepto IE6 e IE7. (Pero apenas cuentan) Por lo tanto, debe observar las operaciones que funcionan directamente en '$ ('html')' - outerhtml suena correcto. – wombleton

Respuesta

114

Los métodos document.open/write/close van a hacer lo que quiere:

var newDoc = document.open("text/html", "replace"); 
newDoc.write(myString); 
newDoc.close(); 

A menos que pase el parámetro de reemplazo, la llamada a document.open agrega el historial de la página. Por lo tanto, los usuarios tendrían que hacer clic dos veces para ir a la página anterior.

+1

Gracias, esto funciona a la perfección. ¿Sabes por casualidad si esto se comporta de manera diferente en cualquier navegador que no sea así? –

+1

Dado que estos han sido parte del DOM durante mucho tiempo, espero que funcionen correctamente en todos los navegadores modernos. –

+1

Oye, actualmente hay un problema con Firefox y actualización cuando usas la solución. ¿Hay alguna solución ahora? –

13

Se podía despojar a cabo las etiquetas html, y luego poner todo en su interior el elemento html:

$('html').html(myString.replace(/<html>(.*)<\/html>/, "$1")); 
+1

Gracias, pero esto no funciona. No importa qué valor intente, el resultado de '$ ('html'). Html (somevalue)' es una página en blanco con un DOM vacío (en IE). –

+0

Parece que funciona en Chrome y FF, pero! –

+4

No es necesario pelar '$ (" html "). Html (myString)' lo hace automáticamente. – inf3rno

4

Otra variante para tratar podría ser

$('html').replaceWith(myString); 

http://api.jquery.com/replaceWith/

+0

Tenga en cuenta que esto también reemplaza el objeto jQuery, por lo que si mantiene referencias, debe actualizarlas. –

+3

No funciona. 'HierarchyRequestError: Node no se puede insertar en el punto especificado en la jerarquía' en firefox. – inf3rno

+0

Casi el mismo resultado que inf3rno => El nodo no puede reemplazarse – Mauro

5

Al menos en Firefox (47,0) la solución:

var newDoc = document.open("text/html", "replace"); 
newDoc.write(response); 
newDoc.close(); 

no funciona como se sugiere desde presionando el botón Atrás de firefox aún carga la entrada del historial anterior, es decir, el punto completo de usar "reemplazar" es evitar que los usuarios hagan clic en el botón Atrás solo para ser recibidos por la vista de la página anterior a la última vez que se invocó document.write(). La forma de hacer esto que no causa el efecto antes mencionado es simplemente llamando a métodos en el objeto documento directamente:

document.open("text/html", "replace"); 
document.write(response); 
document.close(); 

Utilizando la opción de sustituir no sólo evita el llenado de la historia a los usuarios con la basura, sino que también ayuda en el tratamiento de la problemas que surgen de las formas raras en que los navegadores a menudo manejan las entradas de historial creadas por javascript, ya que a veces permite que el navegador registre los cambios realizados en el documento mediante javascript en el historial puede tener resultados inesperados al manejar las operaciones de retroceso y avance (por ejemplo agregando 'wyciwyg: // (somenumber)' a la url después de realizar un document.write() en el documento que tuvo su historial revertido a un estado anterior).

Cuestiones relacionadas