variable - document.writeln javascript

document.write() sobrescribiendo el documento?

Question

Esta:

function myFunction()
{
document.write("sup");
}

llamado en html como:

<div id="myDiv">
<script>myFunction();</script>
</div>t

agrega una cadena sup al elemento div myDiv . Que es lo que quiero, exactamente. Sin embargo, esto:

function loadFile(uri)
{
var r = new XMLHttpRequest();
document.write("trying to open: " + uri);
r.open(''GET'', uri, true);
r.send(null);
r.onreadystatechange = function()
{
if (r.readyState == 4)
{
myFunction();
}
}
}
function myFunction()
{
document.write("sup");
}

llamado así:

<div id="myDiv">
<script>loadFile("filename.txt");</script>
</div>

Parece estar sobrescribiendo todo mi archivo html. Es decir, cuando lo ejecuto en Firefox, solo me muestra la cadena de caracteres (es decir, todo el contenido de la página), pero parece que la página aún se está cargando (el icono de carga de FF todavía está animando, aparentemente infinitamente).

En primer lugar, se usará solo localmente, sin conexión, como una forma rápida y práctica de presentar datos (utilizando html + js y el navegador web en lugar de colocar el archivo de texto). Lo que quiero es cargar un archivo de texto local y luego colocar parte de su contenido como parte de la página html. Lo mismo que en mi primer ejemplo pero con cargar el archivo de texto primero.

Answer 1

El problema es que cuando ejecuta document.write después de que el documento se haya cargado, sobrescribe todo el documento. Si se ejecuta antes de eso, no lo sobrescribe.

Lo que quieres hacer es establecer el innerHtml de un elemento específico, algo así como:

document.getElementById("myDiv").innerHTML="Sup";

Answer 2

Veamos qué hace un navegador cuando recibe un archivo html.

1. El documento de la ventana se abre para escribir. Imagina abrir un archivo de texto.
2. El navegador escribe los contenidos al documento. En este paso ocurre mucha magia: los objetos se crean y el html se representa como cajas.
3. El documento de la ventana cierra el documento. Algo así como guardar el archivo de texto.

Ahora, los navegadores modernos también exponen un documento API que le permite hacer exactamente esas tareas usando javascript.

Puede abrir un documento para escribirlo utilizando document.open() . También puede comenzar a escribir contenido en el documento utilizando document.write() . Finalmente, puede cerrar el documento para escribir usando document.close() . Dado que el documento siempre debe abrirse para escribirlo antes de escribir, llamar a document.write() siempre da como resultado un document.open() implícito.open document.open() .

Intercalar las llamadas document.write() a lo largo de un cuerpo html es una técnica utilizada comúnmente para insertar dinámicamente los contenidos de una cadena en una página html.

Por ejemplo, si ejecuta document.write("<p>holla</p>") en el cuerpo de un archivo html, el navegador hará lo siguiente al recibir el archivo html.

1. Abra el documento para escribir.
2. Comience a escribir los contenidos html en el documento.
   • El motor de JavaScript ejecutará document.write() cuando lo encuentre y luego escribe "<p>holla</p>" en esa línea específica del documento, ¡como si la cadena ya formara parte del archivo html! Como se llama a document.write() durante el análisis de un archivo html, simplemente se analiza como parte de la página.
3. Cerrar el documento por escrito. Análisis completo.

Si es así como usas document.write() , no habría habido ninguna sorpresa. En su lugar, llama a document.write() después de que se analiza el html.

Entonces, ¿qué crees que debería pasar?

Como mencioné anteriormente, un documento debe abrirse para escribirlo antes de escribirlo . En teoría, podríamos agregar el contenido existente o simplemente sobrescribirlo. Bueno, si agregamos al contenido, terminaremos con una página html no válida porque los nuevos valores aparecerán después de las etiquetas de cierre. Entonces, el comportamiento más sensato es sobrescribir el contenido y eso es exactamente lo que sucede.