Help - Search - Members - Calendar
Full Version: Execute dynamic HTML/JavaScript
HTMLHelp Forums > Programming > Client-side Scripting
Hermes
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
Christian J
Like this?

CODE
<div id="result"></div>
<textarea cols="50" rows="20"
onkeyup="document.getElementById('result').innerHTML=this.value;"></textarea>
Hermes
QUOTE(Christian J @ May 13 2011, 07:48 AM) *

Like this?

CODE
<div id="result"></div>
<textarea cols="50" rows="20"
onkeyup="document.getElementById('result').innerHTML=this.value;"></textarea>



Exactly! But it should be able to run JavaScript embeddings too.
Christian J
Inline scripts seems to work:

CODE
<h1 onmouseover="alert('bar');">foo</h1>

but not function calls or SCRIPT elements.
Hermes
Dear Christian,

I'm almost there! Based on your simple and working code I built the following:

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 / JavaScript) as a variable. I don't know how to do it and your help is very much appreciated!
Christian J
QUOTE(Hermes @ May 13 2011, 08:46 PM) *

CODE
<script type="text/javascript">
var X = " HTML or JavaScript "

What is the purpose of the variable X above? Do you somehow want to associate it with the TEXTAREA's content:

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

?

QUOTE
All I need is using eval function to get the whole code (HTML / JavaScript) as a variable.

Didn't understand that, why do you want to use eval(), and which code do want to make a variable? unsure.gif
Hermes
QUOTE(Christian J @ May 13 2011, 05:32 PM) *


What is the purpose of the variable X above? Do you somehow want to associate it with the TEXTAREA's content?


Exactly!

QUOTE
which code do want to make a variable?


Any HTML or JavaScript. For example:

CODE
<div style="color:red">Some Text<div>


or

CODE
<script type="text/javascript">
document.write('Hello world!');
</script>
Christian J
You can use a variable like this:

CODE
<textarea id="input" cols="35" rows="7"></textarea>
<div id="result"></div>

<script type="text/javascript">
var x='<div style="color:red">Some Text</div>';
window.onload=function()
{
    document.getElementById('result').innerHTML=x;
    document.getElementById('input').onkeyup=function()
    {
        document.getElementById('result').innerHTML=this.value;
    }
}
</script>

but maybe that's not what you want...

It might work better if you create a completely new page (using a server-side script, or maybe by opening a new window with javascript), then you can insert any javascript (such as document.write) from the start.
Hermes
QUOTE(Christian J @ May 14 2011, 04:50 AM) *

but maybe that's not what you want...


Many thanks for your time and answer, but as you know it doesn't support JavaScript embeddings.

Let's just forget about the above question and take a similar one:

I wonder how I can set X equal to a code:

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

var X = " HTML or JavaScript code "

document.write(X);

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


I'd like to use eval to set the whole code as one variable, but I have no idea how to do it.
Christian J
QUOTE(Hermes @ May 14 2011, 12:14 PM) *

I wonder how I can set X equal to a code:


This actually works:

CODE
<script type="text/javascript">
var x='<script type="text\/javascript">alert(\'Hello\');<\/script>';
document.write(x);
</script>

blink.gif

But note that document.write can only be used when the page loads, not afterwards.

QUOTE
I'd like to use eval to set the whole code as one variable, but I have no idea how to do it.

AFAIK eval() evaluates whatever's inside, so I don't think that's what you need. unsure.gif
Hermes
We're almost there, but how can making special characters (backslashes) be done automatically?
Christian J
QUOTE(Hermes @ May 14 2011, 05:43 PM) *

We're almost there

Are we? unsure.gif

QUOTE
how can making special characters (backslashes) be done automatically?

You might use the replace() function for that. Don't know which regular expression that find slashes or single quotes, though.
Hermes
QUOTE(Christian J @ May 14 2011, 04:02 PM) *

You might use the replace() function for that. Don't know which regular expression that find slashes or single quotes, though.


This seems interesting although I'd prefer it to be done automatically:

http://www.molendijk.freei.me/converters/converter_arie.html
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.