Log in

View Full Version : 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 (http://www.dominoguru.com/pages/12062005023908.html) a long time ago.

You could use it as in:

<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:


<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:

<!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:

<!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
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
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>
<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 (http://www.molendijk.freei.me/converters/converter_arie.html) 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:

<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.
Mercury
05-15-2011, 02:09 PM
That's a complicated question. You'll probably need Ajax. Here's an example:...
But perhaps this is not what you are looking for?

I got the answer to my question and I really appreciate your time and educational examples! :)