¿Cómo mostrar el contenido de un archivo .html en una página web?

Tengo dos archivos html Editor.html y Test.html. Quiero obtener el código fuente del archivo Test.html en un div editable de contenido en Editor.html. ¿Puedo hacer esto simplemente usando java script?

preguntado el 21 de mayo de 12 a las 18:05

Encontré una solución usando HTML5 FileReader API con javascript. dotnetobject.com/… Gracias por las respuestas.. -

4 Respuestas

Intentaría usar iframes en ese caso. Puede obtener completamente el contenido del iframe con window.frames:

window.frames['iframe_name'].document.getElementById('div_in_iframe');

y puede reemplazar el contenido de como por lo general.

contestado el 21 de mayo de 12 a las 18:05

a través de ajax.

el jQuery biblioteca hace el trabajo ligero de ajax

   <script src="/jquery.min.js"></script>

   <div id="myeditable" contenteditable="true"></div>

  <script type="text/javascript">

   /* the simplest method in the library */
    $("#myeditable").load("/test.html");

   </script>

Hay otras grandes bibliotecas de abreviaturas de javascript también como prototipo

contestado el 21 de mayo de 12 a las 19:05

El método de carga de jquery parece muy relevante pero no funcionó para mí. Puede ser porque los estoy implementando como una aplicación web local sin alojar páginas en un servidor. - user1408470

localmente, como en un servidor de archivos? - use un servidor web local para trabajar, hay muchos que puede descargar, apache, wamp, etc. - Rob Sedwick

No hay ningún requisito para alojar estos archivos en un servidor web. Solo quiero usar una página web (Editor.html) para mostrar el código fuente de otra página web (Test.html). ¿No es posible solo en el lado del cliente? - user1408470

Algo como esto combinado con cualquier formato que le gustaría debería hacerlo. Eso es si está buscando una forma de escribir código y luego hacer clic en el botón para pasar el contenido al iframe para ver qué sale.

<html>
<head><title>Test</title></head>

    <script>
    function writer()
    {
    var page = document.getElementById('box').value
    document.getElementById('realbox').contentWindow.document.body.innerHTML = page
    }
    </script>
<body>

    <textarea rows ="50%" cols="100%" id='editbox'></textarea>
    <iframe style="background-color: red;" id='realbox' height="100%" width="100%">/iframe>
    <input type="button" onclick="writer()" value="write">

</body>
</html>

contestado el 21 de mayo de 12 a las 20:05

Gracias por la respuesta, pero mi problema es cómo obtener el código fuente de otro archivo para editarlo. Como aquí, ¿puedo obtener un código fuente existente en mi directorio local en 'editbox'? No es necesario renderizarlo en un iframe. Solo quiero abrir un código fuente html dado en una página web como abrimos archivos en IDE. - user1408470

Puede utilizar una iframe para cargar la página web y luego obtener su código HTML usando javascript

<iframe src="test.html" style="display:none;" name="myFrame">
</iframe>
<textarea id="result"></textarea>

y javascript es

<script>
var frame = window.frames["myFrame"].document;
var data = frame.getElementsByTagName('html')[0].innerHTML;
    document.getElementById("result").innerHTML = data;
</script>

Este código ayudará a obtener todos los códigos HTML dentro de la etiqueta de su archivo HTML (en este caso, test.html).

Pero no imprimirá la etiqueta en sí, así que para hacerlo use:

document.getElementById("result").innerHTML = "<HTML>"+data"</HTML>";

Pero recomiendo usar AJAX si es posible usando Jquery Library.

Respondido el 16 de junio de 19 a las 14:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.