Welcome to WebmasterWorld Guest from 54.234.45.10

Forum Moderators: open

Message Too Old, No Replies

Execute dynamic HTML/JavaScript

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

New User

5+ Year Member

joined:Mar 7, 2011
posts: 3
votes: 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
10:16 am on May 13, 2011 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 989
votes: 31


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
4:01 pm on May 13, 2011 (gmt 0)

New User

5+ Year Member

joined:Mar 7, 2011
posts: 3
votes: 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! :)
7:10 pm on May 13, 2011 (gmt 0)

New User

5+ Year Member

joined:Mar 7, 2011
posts: 3
votes: 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!
8:18 pm on May 13, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5012
votes: 23



<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>
8:38 pm on May 13, 2011 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 196
votes: 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>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members