2010-05-20 10 views
5

Tengo algunos que usan jQuery.clone() para obtener el html de una página y luego agregarlo a una etiqueta previa. Funciona correctamente en Firefox y Chrome, pero no pasa nada en el IE:jQuery.clone() Problema de IE

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<script> 
$(function(){ 

    $('button').click(function(){ 
    var $clone = $('html').clone(); 
    $('#output').text($clone.html()); 
    }); 

}); 
</script> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
</style> 
</head> 
<body> 
    <button>run test</button> 
    <pre id="output"></pre> 
</body> 
</html> 

¿Hay algún error con IE sabe que impide esto, o estoy haciendo algo mal?

(necesito para clonar porque yo estoy haciendo algunos cambios en él antes de darle salida)

+2

Está agregando el equivalente de un documento completo (incluyendo un '', '') * de vuelta a * el documento actual y preguntándose por qué no funciona? Me sorprende que funcione en absoluto, en cualquier navegador. –

+0

¿Has intentado solo usar los contenidos()? http://api.jquery.com/contents/ – vsync

+0

@Roatin Marth - Está usando '.text()' y colocándolo en un contenedor 'pre'. Obviamente, tiene la intención de mostrar el marcado de la página en '# output'. – user113716

Respuesta

2

Si desea mostrar sólo el texto de la página en la página, pruebe esto:

$('button').click(function(){ 
    $('#output').empty().html(('<html>\n ' + $('html').html() + '\n</html>') 
    .replace(/&/gm, '&amp;') 
    .replace(/</gm, '&lt;') 
    .replace(/>/gm, '&gt;') 
    .replace(/\r/gm, '') 
    .replace(/\n/gm, '<br>') 
    ); 
}); 

Eso funciona para mí en Chrome, Firefox e IE8.

+0

gracias :) pero también necesito eliminar algunos elementos del html original, ¿cómo puedo hacer eso con tu método? –

+0

Bueno, podrías hacer tu operación 'clone()', meterla como quieras, y luego trabajar con el valor '.html()' del resultado. – Pointy

7

Esto parece funcionar en IE, Firefox & Safari. Estoy llamando al método de la API DOM cloneNode() de JavaScript en lugar de jQuery clone(). No sé por qué funciona. Probablemente deberías hacer más pruebas de navegador.

var $scripts = $('script');   // Cache all scripts in the document 

var html = $('html').get(0).cloneNode(true); // Clone HTML using DOM API 

var $html = $(html);      // Make jQuery object from cloned HTML 

$('script', $html).each(function(i) {  // Loop through scripts in $html 
    this.text = $scripts.get(i).innerHTML; // replacing content with that 
});           // from the cached $scripts 

$('#output').empty().text($html.html()); // Append to #output 
+0

casi, pero elimina los scripts incrustados. como si tuviera . solo quedan las etiquetas . ¿algunas ideas? –

+0

OK, creo que lo tengo. Como IE amablemente nos deja las etiquetas 'scripts' vacías, todo lo que tenemos que hacer es almacenarlas primero en la memoria caché, clonar nuestro' html', y luego actualizar las etiquetas 'scripts' vacías con el contenido de las que están en la memoria caché. Parece funcionar. Actualicé mi respuesta. Házmelo saber. – user113716

1

He notado una gran diferencia en lo que hace el clon en IE y otros. En IE, parece clonar todo, incluidas las etiquetas de script. Por lo tanto, si tiene un código dentro de la etiqueta del script que ejemplifica el código, se volverá a instanciar. En el caso de esta pregunta, probablemente se encuentre con un ciclo infinito, ya que llamará continuamente al código para que se clone a sí mismo.

Cuestiones relacionadas