How to make a real-time HTML viewer

Code:
<html>
    <head>
        <title>Real Time Editor</title>

    <body>

        <SCRIPT language=JavaScript>
            function right(e) {
                if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)) {
                a=window.open("https://www.google.com","WindowName","width=640,height=600,top=40,left=50,resizable=yes,scrollbars=yes,menubar=no,toolbar=no,status=no,location=no");
                return false;
            }
                else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)) {
                a=window.open("https://www.sitiosargentina.com.ar/","WindowName","width=640,height=600,top=40,left=50,resizable=yes,scrollbars=yes,menubar=no,toolbar=no,status=no,location=no");
                return false;
            }
                return true;
            }
                document.onmousedown=right;
                window.onmousedown=right;
        </SCRIPT>


        <script>
            function refresh(){
                var textContent = document.getElementById('editor-textarea').value; document.getElementById('viewer').srcdoc = textContent;
            }
        </script>

        <script type="text/javascript">

            alert("Esta página web es sólo para fines educativos.");

        </script>

        <style>
            *{
                padding: 0;
                margin: o;
        }
        .main{
            background:#ecf0f1;
            width: 100%;
            height: 100%;
            display: inline-flex;
        }
        #editor-textarea{
            width: 100%;
            height: 95%;
            margin: 10px;
            padding: 5px;
        }
        #viewer{
            background: white;
            border: none;
            width: 100%;
            height: 95%;
            margin: 10px;
            border: 1px solid #3498db;
        }
        </style>

    </head>
        <div class="main">
            <textarea id="editor-textarea" onkeyup = "refresh()" placeholder="Empezar a programar..."></textarea>
            <iframe id="viewer"></iframe>
        </div>
    </body>
</html>

Comentarios

Publicar un comentario

Entradas populares de este blog

How to do an Email Bomber with Python

Imagen
Code: import smtplib  #for SMTP Protocol import mimetypes #converts URL import sys #for System import time #time from email.MIMEText import MIMEText class SMTP(object):       def title(self):             print ("       PYTHON MAIL BOMBER IS WORKING :) ")       def SMTPconnect(self):             print( "We are in the SMTPconnect") #list of SMTP server - http://www.e-eeasy.com/SMTPServerList.aspx             self.smtpserver=raw_input("\nEnter SMTP server: ")             self.smtpport=input("Enter SMTP port (Usualy 25 or 465): ")             try:               ...
Leer más

How to make a Christmas animation in HTML

Imagen
Code of index.html : <!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8">     <title>HAPPY NEW YEAR</title>     <style>         body {             background-color: #424f6f;         }         h1 {             color: white;             margin-top: 250px;             font-size: 50px;             text-align: center;         }     </style> </head> <body> <h1 id="messageLabel"></h1> <script> var message = "Ha...
Leer más

Chat with Firebase

Imagen
Code of index.html : <!DOCTYPE HTML> <html>    <head> <!-- Scripts jQuery, bootstrap --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>               <!-- Estilos  bootstrap, chat--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="css.css" >       <!-- área de código Firebase y lectura de Mensajes-->        <script src="https://www.gstatic.com/firebasejs/5.6.0/firebase.js"></script>   <script>      // Init...
Leer más