javascript document.write

javascript - ¿Cuáles son las alternativas a document.write?



(10)

Aquí hay un código que debe reemplazar a document.write in situ:

document.write=function(s){ var scripts = document.getElementsByTagName(''script''); var lastScript = scripts[scripts.length-1]; lastScript.insertAdjacentHTML("beforebegin", s); }

En los tutoriales aprendí a usar document.write . Ahora entiendo que para muchos esto está mal visto. Intenté print() , pero luego literalmente lo envía a la impresora.

¿Cuáles son las alternativas que debería usar y por qué no debería usar document.write ? Tanto w3schools como MDN usan document.write .

Como una alternativa recomendada a document.write , puede usar la manipulación de DOM para consultar directamente y agregar elementos de nodo al DOM.

Intente utilizar getElementById () o getElementsByName () para acceder a un elemento específico y luego usar la propiedad innerHTML:

<html> <body> <div id="myDiv1"></div> <div id="myDiv2"></div> </body> <script type="text/javascript"> var myDiv1 = document.getElementById("myDiv1"); var myDiv2 = document.getElementById("myDiv2"); myDiv1.innerHTML = "<b>Content of 1st DIV</b>"; myDiv2.innerHTML = "<i>Content of second DIV element</i>"; </script> </html>

La pregunta depende de lo que en realidad estás tratando de hacer.

Usualmente, en lugar de hacer document.write puedes usar someElement.innerHTML o mejor, document.createElement con someElement.appendChild .

También puede considerar usar una biblioteca como jQuery y usar las funciones de modificación allí: http://api.jquery.com/category/manipulation/

La razón por la que se reemplaza su HTML es debido a una función malvada de JavaScript: document.write() .

Definitivamente es "mala forma". Solo funciona con páginas web si lo usa en la carga de la página; y si lo usa durante el tiempo de ejecución, reemplazará todo su documento con la entrada. Y si lo aplica como una estricta estructura XHTML, ni siquiera es un código válido.

el problema:

document.write() escribe en la secuencia de documentos. Llamar a document.write() en un document.write() cerrado (o cargado) llama automáticamente a document.open lo que borrará el documento.

- document.write()

document.write() tiene dos secuaces, document.open y document.close() . Cuando se carga el documento HTML, el documento está "abierto". Cuando el documento ha terminado de cargarse, el documento se ha "cerrado". El uso de document.write() en este momento borrará todo su documento HTML (cerrado) y lo reemplazará con un documento nuevo (abierto). Esto significa que su página web se borró y comenzó a escribir una nueva página, desde cero.

Creo que document.write() hace que el navegador también tenga una disminución en el rendimiento (corrígeme si estoy equivocado).

un ejemplo:

Este ejemplo escribe salida en el documento HTML después de que la página se haya cargado. Observe los poderes malvados de document.write() borrar todo el documento cuando presiona el botón "exterminar":

I am an ordinary HTML page. I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.write(''This HTML page has been succesfully exterminated.'')" value="exterminate"/> me!

las alternativas:

  • .innerHTML Esta es una maravillosa alternativa, pero este atributo debe adjuntarse al elemento donde desea colocar el texto.

Ejemplo: document.getElementById(''output1'').innerHTML = ''Some text!'';

  • .createTextNode() es la alternativa recomendada por el W3C .

Ejemplo: var para = document.createElement(''p''); para.appendChild(document.createTextNode(''Hello, '')); var para = document.createElement(''p''); para.appendChild(document.createTextNode(''Hello, ''));

NOTA: Se sabe que esto tiene algunas disminuciones en el rendimiento (más lento que .innerHTML ). Recomiendo usar .innerHTML en .innerHTML lugar.

el ejemplo con la alternativa .innerHTML :

I am an ordinary HTML page. I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.getElementById(''output1'').innerHTML = ''There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.'';" value="exterminate"/> me! <p id="output1"></p>

No estoy seguro de si esto funcionará exactamente, pero pensé en

var docwrite = function(doc) { document.write(doc); };

Esto resolvió el problema con los mensajes de error para mí.

No veo el problema con document.write . Si lo está utilizando antes de que el evento de onload se dispare, como probablemente sea, para construir elementos a partir de datos estructurados, por ejemplo, es la herramienta adecuada para usar. No existe una ventaja de rendimiento al usar insertAdjacentHTML o agregar nodos explícitamente al DOM después de que se haya creado. Acabo de probarlo de tres maneras diferentes con un script antiguo que solía programar llamadas de módem entrantes para un servicio 24/7 en un banco de 4 módems.

Cuando finaliza, este script crea más de 3000 nodos DOM, principalmente celdas de tabla. En una PC de 7 años con Firefox en Vista, este pequeño ejercicio lleva menos de 2 segundos utilizando document.write de un archivo fuente local de 12kb y tres GIF de 1px que se reutilizan unas 2000 veces. La página simplemente aparece en forma completa, lista para manejar eventos.

El uso de insertAdjacentHTML no es un sustituto directo ya que el navegador cierra las etiquetas que el script requiere permanecer abierto, y tarda el doble de tiempo en crear una página destruida. Escribir todas las piezas en una cadena y luego pasarlo a insertAdjacentHTML lleva aún más tiempo, pero al menos se obtiene la página tal como se diseñó. Otras opciones (como reconstruir manualmente el nodo DOM a la vez) son tan ridículas que ni siquiera voy a ir allí.

A veces document.write es lo que se debe usar. El hecho de que sea uno de los métodos más antiguos en JavaScript no es un punto en su contra, sino un punto a su favor: es un código altamente optimizado que hace exactamente lo que se pretendía hacer y que ha estado haciendo desde su inicio.

Es bueno saber que hay métodos alternativos posteriores a la carga disponibles, pero debe entenderse que están destinados a un propósito diferente por completo; es decir, modificar el DOM después de haber sido creado y la memoria asignada a él. Usar estos métodos de forma intrínseca requiere más recursos si su script está destinado a escribir el código HTML desde el cual el navegador crea el DOM en primer lugar.

Solo escríbalo y deja que el navegador y el intérprete hagan el trabajo. Para eso están allí.

PD: Acabo de probar usando un onload en la etiqueta body e incluso en este momento el documento aún está open y document.write() funciona como se esperaba. Además, no hay una diferencia de rendimiento perceptible entre los diversos métodos en la última versión de Firefox. Por supuesto, hay un montón de almacenamiento en caché probablemente en algún lugar de la pila de hardware / software, pero ese es realmente el punto: deje que la máquina haga el trabajo. Sin embargo, puede hacer la diferencia en un teléfono inteligente barato. ¡Aclamaciones!

Solo deje caer una nota aquí para decir que, aunque utilizar document.write está muy mal visto debido a problemas de rendimiento (inyección y evaluación síncrona de DOM), tampoco existe una alternativa real 1: 1 si está utilizando document.write para inyectar etiquetas de script Bajo demanda.

Hay muchas maneras excelentes de evitar tener que hacer esto (por ejemplo, cargadores de scripts como RequireJS que administran sus cadenas de dependencia), pero son más invasivos y, por lo tanto, se usan mejor en todo el sitio / aplicación.