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 a document.write?
¿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 DOM manipulation para consultar directamente y agregar elementos de nodo al DOM.
Sería amable de su parte agregar algo de contenido además del enlace ... –
No solo coloque el enlace. – Unbreakable
Esta sería una mejor respuesta si aborda la cuestión de * why * document.write es problemático, ya que [esta respuesta] (http://stackoverflow.com/a/27531116/19068). – Quentin
Intente utilizar getElemenById() o getElementsByName() para acceder a un elemento específico y después de 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>
No funcionó del todo. ¿No necesita etiquetas
y '<\/b>' en el script? – DarkLightAthx, DarkLightA! Lo he arreglado –
todavía no funciona ... http://jsfiddle.net/8XwRH/ – DarkLightA
La pregunta depende de lo que en realidad se está tratando de hacer.
Por lo general, en lugar de document.write puede usar someElement.innerHTML o mejor, document.createElement con someElement.appendChild.
También puede considerar el uso de una biblioteca como jQuery y el uso de las funciones de modificación de allí: http://api.jquery.com/category/manipulation/
Apenas cayendo una nota aquí para decir que, aunque el uso document.write está muy mal visto debido a performance concerns (inyección DOM sincrónica y evaluación), también existe sin alternativa real 1: 1 si está usando document.write para inyectar etiquetas de scripts a pedido.
Hay un montón de grandes maneras de evitar tener que hacer esto (por ejemplo cargadores guión como RequireJS que gestionan sus cadenas de dependencia), pero son más invasivos y por lo tanto son los más utilizados en todo el sitio/aplicación.
Este es probablemente el reemplazo más correcto y directo: insertAdjacentHTML.
Aquí es código que debe reemplazar document.write en el lugar:
document.write=function(s){
var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length-1];
lastScript.insertAdjacentHTML("beforebegin", s);
}
buen consejo. ¿Es crossbrowser? Lo probé en Chrome y funciona. – Pons
¿No funcionará esto si no hay scripts en la página? – Noyo
Bueno, al menos habría en la página (donde quiera que esté poniendo esa función), pero ¿y si la única secuencia de comandos se encuentra en el
? La clave que menciona es la función insertAdjacentHTML. –La razón por la que se sustituye el código HTML es debido a un mal funcionamiento 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.
document.writeescribe en la secuencia documento. Llamar aldocument.writeen un documento cerrado (o cargado) llama automáticamente aldocument.open, lo que borrará el documento.
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 punto borrará su documento HTML completo (cerrado) y lo reemplazará con un nuevo documento (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íjame si estoy equivocado).
En este ejemplo se escribe de salida para el documento HTML después ha cargado la página. poderes malignos reloj document.write() 's borrar todo el documento cuando se pulsa el botón de "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!.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, '));
NOTA: Este es conocido por tener algunas disminuciones de rendimiento (más lento que .innerHTML). Recomiendo usar .innerHTML en su lugar.
.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>¿Entonces el mal solo comienza después de que se cierra el documento? Además de estar pasado de moda, ¿hay alguna desventaja al usar document.write antes de eso? ¿Hay alguna incertidumbre práctica sobre _cuando_ el documento está cerrado? –
@ BobStein-VisiBone, sí, se puede llamar a 'document.write()' durante la carga de la página, mientras el navegador está analizando la página. Una vez que la página ha sido analizada/cargada, llamar a esta función también llamará a 'document.open()', que borrará la página y comenzará desde cero. No puedo pensar en ninguna razón para no utilizar la función durante la carga de la página, excepto por la coherencia con la forma en que agrega contenido a una página en cualquier otro momento. Y el documento se cierra tan pronto como el navegador haya terminado de analizar el documento. –
'document.write()' parece ser la mejor solución para [cdn local fallback] (https://stackoverflow.com/a/9400432/673991). Todavía no he probado getElementById/innerHTML, pero una solución createElement/insertBefore resulta ser [no sincronizada] (https://stackoverflow.com/a/4825258/673991). –
no veo el problema con document.write. Si lo está utilizando antes de que el evento onload se dispare, como probablemente sea, para compilar 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 termina, este script crea más de 3000 nodos DOM, principalmente celdas de tabla. En una PC de 7 años que ejecuta Firefox en Vista, este pequeño ejercicio lleva menos de 2 segundos usando document.write desde 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.
Usando insertAdjacentHTML no es un sustituto directo como el navegador se cierra etiquetas, que el guión requiere permanecer abierto, y toma el doble de tiempo para crear una página en última instancia destrozado. Escribir todas las piezas en una cadena y luego pasarlo a insertAdjacentHTML lleva 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 fin diferente; 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.
Simplemente escríbalo y deja que el navegador y el intérprete hagan el trabajo. Para eso están allí.
PS: Acabo de prueba usando un PARAM onload en la etiqueta body e incluso en este punto el documento no está aún open y document.write() funciones como se pretende. 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!
no estoy seguro de si esto va a funcionar exactamente, pero pensé en
var docwrite = function (doc) {
document.write (doc);
};
Esto resolvió el problema con los mensajes de error para mí.
document.currentScript.insertAdjacentHTML('beforebegin', 'this is the document.write alternative');
https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
Aunque esto puede responder la pregunta, proporcione cualquier explicación que pueda para asegurarse de que las personas entiendan lo que está sucediendo aquí. – Randy
'impresión()' 'resuelve a window.print()'. – alex
posible duplicado de [Reemplazar document.write() s en una página xhtml + xml] (http://stackoverflow.com/questions/3614288/replacing-document-writes-in-an-xhtmlxml-page) – alk
JavaScript 's imprimir() 'no es lo mismo que' print() 'de PHP. JS literalmente envía la página a la impresora, y PHP simplemente emite código. –