Writing Dynamic Content

Forum Moderators: open

Message Too Old, No Replies

Writing Dynamic Content

Rain_Lover

4:28 pm on Jun 12, 2010 (gmt 0)

Hi,

Here's what I've been trying a lot to find but to no avail:
a simple text field and submit button that lets users insert an embedding (HTML/CSS/JavaScript codes) to display on the same frame.

Your help is greatly appreciated!
Regards
Rain Lover

MichaelBluejay

6:05 am on Jun 13, 2010 (gmt 0)

Do you mean something like this?

<div id=dynamic></div>
<textarea id=code></textarea>
<input type=button value=Submit onclick="document.getElementById('dynamic').innerHTML=document.getElementById('code').value">

Rain_Lover

8:42 am on Jun 13, 2010 (gmt 0)

Thanks for the code! That's exactly what I'm looking for. But the problem is it doesn't support any embed code. It works well if you embed HTML, but doesn't run JavaScript codes. To see what I mean embed the following code:

<html> 
<head> 
<script type="text/javascript"> 
function startTime() 
{ 
var today=new Date(); 
var h=today.getHours(); 
var m=today.getMinutes(); 
var s=today.getSeconds(); 
// add a zero in front of numbers<10 
m=checkTime(m); 
s=checkTime(s); 
document.getElementById('txt').innerHTML=h+":"+m+":"+s; 
t=setTimeout('startTime()',500); 
} 

function checkTime(i) 
{ 
if (i<10) 
 { 
 i="0" + i; 
 } 
return i; 
} 
</script> 
</head> 

<body onload="startTime()"> 
<div id="txt"></div> 
</body> 
</html>

subexpression

5:37 pm on Jun 14, 2010 (gmt 0)

Rain_Lover,

I put together a simple script which locates <script> tags in the textarea, isolates the javascript, then creates a script tag which is attached to the document.

I used the textarea because it's multiline, as opposed to a single-line text input.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<script type="text/javascript">
function rendercontent(id1,id2){
var textarea = document.getElementById(id1);
var div = document.getElementById(id2);
var txtval = textarea.value;
var rx = new RegExp('<script (.|\n)*?>(.|\n)*?<\/script>');
if(rx.test(textarea.value)){
var scripttxt = txtval.substring(txtval.indexOf('>',txtval.indexOf('<script')) +1,
txtval.indexOf('<\/script>'));
var script = document.createElement('script');
script.innerHTML = scripttxt;
document.getElementsByTagName('head')[0].appendChild(script);
}
div.innerHTML = txtval;
}
</script>
</head>

<body>
<div id="content"></div>
<textarea id="textarea"></textarea>
<input type="button" onclick="rendercontent('textarea','content');" value="execute" />
</body>
</html>

So then "innerHTML" is used to insert the truncated script text into the new script element, and then finally again to insert the original value into the div.
Of course, I'd never allow users to implement scripts in this way. It's a very serious security hole.
It's fun to play around with, but I'd advise against hosting anything like this :)

With this, I was able to run several complex scripts right out of the textarea. Wacky!

subexpression

6:04 pm on Jun 14, 2010 (gmt 0)

With the above example, an external src won't work...a script tag with src="":
<script type="text/javascript" src="_src_of_js_"></script>

But, internal scripts will work:
<script type="text/javascript" language="javascript">
/* functions go here */
</script>

Although, with a few modifications you could easily get src="" attributes to work as well.

if indexOf('src=\"') > -1
Isolate the next occurrence of the double quote
Use substring to extract the .js file name and set the script.src attribute

else parse internal javascript