Execute dynamic HTML/JavaScript

**Mercury** · 05-13-2011, 05:08 AM

Hi,

I'd like to create a textarea and a division so that whatever embed code you put in the textarea it gets executed on the division in real-time.

Your kind help is greatly appreciated!
JavaScript newbie

**molendijk** · 05-13-2011, 12:54 PM

I found this a long time ago.

You could use it as in:

Code:

<head>
<script type="text/javascript">
function p(src, targ) {	targ.innerHTML = src.value;}
</script>

<style type="text/css">
TEXTAREA#dhtmleditorexample {border-right: #999 1px solid; border-top: #999 1px solid; border-left: #999 1px solid; width: 100%;border-bottom: #999 1px solid; height:150px; background:#dedede}
#dhtmleditorpreview{background:lightyellow;border:1px solid black;height:150px;}
</style>

</head>

<body>
<h3>Put your html, styles and inbuilt functions here:</h3>
<textarea id="dhtmleditorexample" onkeydown="p(this,document.getElementById('dhtmleditorpreview'))" onblur="p(this,document.getElementById('dhtmleditorpreview'))" 
onkeyup="p(this,document.getElementById('dhtmleditorpreview'))" name="dhtmleditorexample"></textarea>

<br><h3>Result:</h3>

<div id="dhtmleditorpreview"></div>

</body>

Custom functions won't be executed.
===
Arie Molendijk.

**Mercury** · 05-13-2011, 07:25 PM

I'm looking for something that runs JavaScript embeddings as well.
After hours searching and trying different approaches I came up to the following simple code:

Code:

<script type="text/javascript">
var X = " HTML or JavaScript "
window.onload=function()
{
document.getElementById("result").innerHTML = document.getElementById("input").value;
}
</script>

<textarea id="input" cols="35" rows="7"> X </textarea>

<div id="result"></div>

All I need is using eval function to get the whole code (HTML or JavaScript) as one variable. I wonder if you could help me with this as I'm badly stuck!

**molendijk** · 05-14-2011, 05:27 PM

Mercury, you can do thw following. Create 2 files (same folder), call them editor.html and inputbox.html, respectively.
Contents of editor.html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="imagetoolbar" content="no" >
<title>Edit HTML/Javascript in Real-Time</title>

<style type="text/css">
html,body{overflow: hidden}
body{width:100%;height:100%; font-family:verdana;font-size:11px}
</style>
</head>

<body>
<div>
<div style="position:relative; text-align:center;font-size:120%; font-weight: bold;line-height:0.95">
&copy;Arie Molendijk<br>Edit HTML/Javascript in real-time<br>
(don't use f5 for reload while editing)
</div>
<div style="position:absolute;left:50px; top:50px; right:50px; bottom:50%; border:1px solid black" onclick="top.inputbox.document.getElementById('text_area').value='';top.inputbox.document.getElementById('text_area').select(); top.outputbox.document.body.innerHTML='';top.inputbox.update()">
<div style="margin-top:-25px">Input</div>
<div style="position: relative; float:right; margin-top:-20px">Clear</div><br>
<iframe name="inputbox" src="inputbox.html" style="position:absolute; width: 100%; height: 90%" frameborder="0"></iframe>
</div>

<div style="position:absolute;left:50px; top:50%; right:50px; bottom:50px;margin-top:25px;border:1px solid black" >
<div style="margin-top:-20px">Output</div><br>
<iframe name="outputbox" style="position:absolute; width: 100%; height: 95%" frameborder="0"></iframe>
</div>
</div>
</body>
</html>

Contents of inputbox.html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="imagetoolbar" content="no" >
<title>Edit HTML/Javascript in Real-Time</title>

<script type="text/javascript">
var entered = '';

function edit()
{
var textarea=document.getElementById('text_area')
var d = top.outputbox.document; 


if (entered != document.getElementById('text_area').value)
{
entered = document.getElementById('text_area').value;
d.open(); d.write(entered); d.close();
}
window.setTimeout(edit, 150);
}
</script>

<style type="text/css">
html,body { overflow: hidden; }
textarea {overflow: auto; border: none;font-family:verdana;font-size:11px}
</style>

</head>

<body onload="edit(); document.getElementById('text_area').select()" >
<div>
<textarea cols="10" rows="10" style="position:absolute;width:99%;height:99%;" name="text_area" id="text_area"></textarea>
</div>
</body>

</html>

Now when you open editor.html, you'll see an input box on top, the output at the bottom. Put anything you like in the input box; it will produce the correct output in the lower box.
I hope this will help you.
===
Arie (Molendijk).

**Mercury** · 05-14-2011, 05:34 PM

Thanks so much! Would you mind taking a look at the second question as well?

**molendijk** · 05-14-2011, 06:08 PM

Originally Posted by Mercury

Thanks so much! Would you mind taking a look at the second question as well?

The javascript that you put in the top box is executed in the lower box. So there is no need for eval.
===
Arie.

**Mercury** · 05-14-2011, 06:47 PM

Originally Posted by molendijk

The javascript that you put in the top box is executed in the lower box. So there is no need for eval.
===
Arie.

You're right and your solution works with no problem.
Now please consider the following as a new question:

HTML Code:

<html>
<body>
<script type="text/javascript">

var X = " HTML or JavaScript code "

document.write(X);

</script>
</body>
</html>

I'd like to set the code (html or JavaScript) as one variable and it's something that seems to be in need of eval and I don't know how to do.

Sample HTML as one variable: <div style="color:red">Text</div>
sample JavaScript as one variable: <script type="text/javascript">document.write("<h1>This is a heading</h1>");</script>

**molendijk** · 05-14-2011, 09:55 PM

You can convert any html or javascript into a variable by putting the html/javascript in the left box of this page and then hitting the convert button. What you get in the box to the right is the variable you need (the name of the variable here is included_js, but you can replace that with whatever you want.
For instance, <script type="text/javascript">document.write("<h1>This is a heading</h1>");</script> will come out as:
included_js = '<script type="text\/javascript">document.write("<h1>This is a heading<\/h1>");<\/script>'.
===
Arie.

**Mercury** · 05-15-2011, 03:08 AM

You're a coding master! However, how can we include the replace function so things are converted automatically?

**molendijk** · 05-15-2011, 11:44 AM

That's a complicated question. You'll probably need Ajax. Here's an example:

Code:

<head>
<script type="text/javascript">
function AjaxWrite(url){
var pageRequest = false //variable to hold ajax object
/*@cc_on
@if (@_jscript_version >= 5)
try {
pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try {
pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e2){
pageRequest = false
}
}
@end

@*/ if (!pageRequest && typeof XMLHttpRequest != 'undefined')
pageRequest = new XMLHttpRequest()

if (pageRequest){ //if pageRequest is not false
pageRequest.open('GET', url, false) //get page synchronously
pageRequest.send(null)

var X=pageRequest.responseText
document.write(X)

}
}

</script>
</head>

<body>
Existing text<br>

<!-- Including an external file 'test.html' together with all its scripts and styles (so no need for eval: the script takes care of it)  -->
<script type="text/javascript">AjaxWrite("test.html") </script><br>

Existing text
</body>

In this example, an external file test.html is included at a position corresponding to where we have <script type="text/javascript">AjaxWrite("test.html") </script>. What is included is not only HTML, but also the scripts and styles contained in test.html.
But perhaps this is not what you are looking for?
===
Arie.