¿Cómo obtengo la fuente innerHTML original sin los contenidos generados por Javascript?

Question

¿Es posible obtener de alguna manera la fuente HTML original sin los cambios realizados por el Javascript procesado? Por ejemplo, si hago:

<div id="test"> 
    <script type="text/javascript">document.write("hello");</script> 
</div> 

Si hago:

alert(document.getElementById('test').innerHTML); 

muestra:

<script type="text/javascript">document.write("hello");</script>hello 

En términos simples, me gustaría que el alert a ver sólo:

<script type="text/javascript">document.write("hello");</script> 

sin la fina l hello (el resultado del script procesado).

Answer 1

creo que desea atravesar los nodos DOM:

var childNodes = document.getElementById('test').childNodes, i, output = []; 

for (i = 0; i < childNodes.length; i++) 
    if (childNodes[i].nodeName == "SCRIPT") 
     output.push(childNodes[i].innerHTML); 

return output.join(''); 

Answer 2

No creo que hay una solución simple para simplemente "agarrar fuente original", ya que tendrá que ser algo que se suministra por el navegador . Pero, si solo está interesado en hacer esto para una sección de la página, entonces tengo una solución para usted.

Usted puede envolver la sección de interés dentro de un script "congelada":

<script id="frozen" type="text/x-frozen-html">

El atributo type acabo de componer, pero va a forzar al navegador a ignorar todo dentro de él. A continuación, agregue otra etiqueta de secuencia de comandos (javascript adecuado esta vez) inmediatamente después de esta: la secuencia de comandos "descongelar". Esta secuencia de comandos de descongelación obtendrá la secuencia de comandos congelada por ID, tomará el texto dentro de ella y realizará un document.write para agregar los contenidos reales a la página. Siempre que necesite la fuente original, se capturará como texto dentro del script congelado.

Y ahí lo tienes. La desventaja es que no usaría esto para toda la página ... (SEO, resaltado de sintaxis, rendimiento ...) pero es bastante aceptable si tiene un requisito especial en parte de una página.

---

Editar: Aquí hay un código de muestra. Además, como @FlashXSFX señaló correctamente, cualquier etiqueta de script dentro del script congelado deberá ser escapada. Por lo tanto, en este sencillo ejemplo, crearé una etiqueta <x-script> para este propósito.

<script id="frozen" type="text/x-frozen-html"> 
    <div id="test"> 
     <x-script type="text/javascript">document.write("hello");</x-script> 
    </div> 
</script> 
<script type="text/javascript"> 
    // Grab contents of frozen script and replace `x-script` with `script` 
    function getSource() { 
     return document.getElementById("frozen") 
     .innerHTML.replace(/x-script/gi, "script"); 
    } 
    // Write it to the document so it actually executes 
    document.write(getSource()); 
</script> 

Ahora cada vez que necesite la fuente:

alert(getSource()); 

Ver la demo: http://jsbin.com/uyica3/edit

Answer 3

método de fuerza bruta

var orig = document.getElementById("test").innerHTML; 
alert(orig.replace(/<\/script>[.\n\r]*.*/i,"</script>")); 

EDIT:

Este coul d ser mejor

var orig = document.getElementById("test").innerHTML + "<<>>"; 
alert(orig.replace(/<\/script>[^(<<>>)]+<<>>/i, "<\/script>")); 

Answer 4

Si reemplaza document.write añadir algunos identificadores al principio y al final de todo lo escrito en el documento por el guión, usted será capaz de eliminar esos escribe con una expresión regular.

Esto es lo que ocurrió:

<script type="text/javascript" language="javascript"> 
     var docWrite = document.write; 
     document.write = myDocWrite; 

     function myDocWrite(wrt) { 
      docWrite.apply(document, ['<!--docwrite-->' + wrt + '<!--/docwrite-->']); 
     } 
    </script> 

Añadido tu ejemplo en alguna parte de la página después del guión inicial:

<div id="test"> 
     <script type="text/javascript">  document.write("hello");</script> 
    </div> 

Entonces utilicé esta alertar lo que había dentro:

var regEx = /<!--docwrite-->(.*?)<!--\/docwrite-->/gm; 
    alert(document.getElementById('test').innerHTML.replace(regEx, '')); 

Answer 5

Si desea obtener el documento prístino, tendrá que buscarlo nuevamente. No hay forma de evitar eso. Si no fuera por document.write() (o código similar que se ejecutaría durante el proceso de carga), podría cargar el innerHTML del documento original en la memoria en load/domready, antes de modificarlo.

Answer 6

No puedo pensar en una solución que funcione de la manera en que lo pides. El único código al que JavaScript tiene acceso es a través del DOM, que solo contiene el resultado una vez que la página ha sido procesada.

Lo más cercano que puedo pensar para lograr lo que quieres es utilizar Ajax para descargar una copia nueva del HTML sin formato para tu página en una cadena Javascript, en ese punto ya que es una cadena puedes hacer lo que quieras con incluyendo mostrarlo en un cuadro de alerta.

Answer 7

¿Podría enviar una solicitud de Ajax a la misma página en la que se encuentra actualmente y utilizar el resultado como su HTML original? Esto es infalible dadas las condiciones adecuadas, ya que literalmente se obtiene el documento HTML original. Sin embargo, esto no funcionará si la página cambia en cada solicitud (con contenido dinámico) o si, por algún motivo, no puede realizar una solicitud a esa página específica.

Answer 8

Una manera simple es recuperarlo del servidor nuevamente. Estará en el caché muy probablemente. Aquí está mi solución usando jQuery.get(). Toma el URI original de la página y carga los datos con una llamada AJAX:

$.get(document.location.href, function(data,status,jq) {console.log(data);}) 

Esto imprimirá el código original sin javascript. ¡No maneja ningún error!

Si no quieren usar jQuery en busca de la fuente, consultar la respuesta a esta pregunta: ¿How to make an ajax call without jquery?

Answer 9

Una forma complicada está utilizando <style> etiqueta de plantilla. Para que ya no necesite renombrar x-script.

console.log(document.getElementById('test').innerHTML);

<style id="test" type="text/html+template"> 
 
    <script type="text/javascript">document.write("hello");</script> 
 
</style>

Pero no me gusta esta solución fea.