Execute dynamic HTML/JavaScript

Forum Moderators: open

Message Too Old, No Replies

Execute dynamic HTML/JavaScript

White_horse

5:12 am on May 13, 2011 (gmt 0)

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

birdbrain

10:16 am on May 13, 2011 (gmt 0)

Hi there White_horse,

and a warm welcome to these forums. ;)

Here is an example...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
body {
   background-color:#f0f0f0;
 }
#tra {
   width:400px;
   height:200px;
 }
.basics {
   padding:20px;
   border:3px double #999;
   margin-top:20px;
   background-color:#fff;
 }
</style>

<script type="text/javascript">
  var obj;
function init(){
  var df=document.forms[0];
  obj=document.getElementById('display');

df[0].onkeyup=function() {
  showStuff(this.value);
 }
df[0].onblur=function() {
  showStuff(this.value);
 }
df[1].onclick=function() {
  obj.className='';
  obj.innerHTML='';
 }
 }
function showStuff(v){

  v.length==0?obj.className='':obj.className='basics';

  obj.innerHTML=v;
 }
  window.addEventListener?
  window.addEventListener('load',init,false):
  window.attachEvent('onload',init);

</script>

</head>
<body>

<form action="#">
 <div>
  <textarea id="tra" cols="0" rows="0"></textarea>
  <input type="reset" value="clear">
 </div>
</form>

<div id="display"></div>

</body>
</html>

birdbrain

White_horse

4:01 pm on May 13, 2011 (gmt 0)

Seems great! However:

1. It doesn't run JavaScript embeddings well, e.g.

<div id="wpdc_embed_12830726823" style="display: none">Time &amp; Date Widget</div><head></head><script src="http://www.widgipedia.com/embed/martinkorner/Time--Date-Widget_776w-12830726823t-1283072682143i-8192p.js"></script>

2. I'd like it to work on page load so I can set a default value to the textarea and when page loads, I can see the result in the display <div>.

Many thanks for the answer anyway! :)

White_horse

7:10 pm on May 13, 2011 (gmt 0)

Dear birdbrain,

Would you mind ignoring the above code and take the following:

<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 / JavaScript) as a variable. I wonder if you could help me with this as I'm badly stuck!

Fotiman

8:18 pm on May 13, 2011 (gmt 0)


<html>
<head>
</head>
<body>
<textarea id="foo">
&lt;script&gt;
alert('foo');
&lt;/script&gt;
</textarea>
<div id="result"></div>
<script>
window.onload = function () {
  var foo = document.getElementById('foo'),
    result = document.getElementById('result'),
    i;
  result.innerHTML = foo.value;
  var scripts = result.getElementsByTagName("script");
  for (i = 0; i < scripts.length; i++) {
    eval(scripts[i].innerHTML || scripts[i].text);
  }
};
</script>
</body>
</html>

Rain_Lover

8:38 pm on May 13, 2011 (gmt 0)

Dear Fotiman,

Exactly what I wanted! However, it doesn't seem to handle some JavaScript embeddings. For example:

<div id="wpdc_embed_12830726823" style="display: none">Time &amp; Date Widget</div><head></head><script src="http://www.widgipedia.com/embed/martinkorner/Time--Date-Widget_776w-12830726823t-1283072682143i-8192p.js"></script>