Triggering myself

Albino · February 2nd, 2007, 10:17 AM

Hi everybody,
I was playing around this since a while, without any succes, then I left it as it was. Now I have another place, where it would be quite useful for me.
Let's say, there is an existing div tga.
I give some content to the innerHTML of the div. The new content has soma javascript code, but as we know, the interpreter will not intrpret the new content. How could I get triggered the div tag from "itself"?
I would like to get the alert executed... The text appears, but the alert does not... Any idea. Please help me.
Gregor
<div id="myid">Old content</div>
<script>
oElement = document.getElementById('myid');
oElement.innerHTML='New content<script>new Function("alert(\'I would like to see this\');");<\/script>';
</script>

Iturea · February 2nd, 2007, 02:58 PM

The key is deferring execution of a script block. You are basically tricking IE 7 to put the block in memory for execution. Firefox is a little smarter, so this won't work in Firefox...

You can test this logic by commenting out this line:
oElement1.innerHTML = oElement2.innerHTML
it won't trigger unless you have the above line...

It also won't trigger unless you defer the new content script block. This makes IE put the block of code in memory! I don't know if this is a security exploit or not... Firefox just ignores it (Go Firefox!!!)

Once you transfer the new div to the old div the alert gets triggered.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>     
    <title>Defer Execution</title>
    <script type="text/javascript" language="JavaScript" xml:space="preserve">
      var triggered = false;
    </script>
  </head>
  <body>  
    <div id="oldcontent">
      Old content
    </div>
    <div id="newcontent" style="display:none;">
      New Content
      <script type="text/javascript" language="JavaScript" xml:space="preserve" defer="defer">
        if (triggered)
        {
          triggered = false;
          //Lets see what we have in oldcontent!!!
          alert(document.getElementById('oldcontent').innerHTML);
        }
        triggered = true;
      </script>
    </div>
    <script type="text/javascript" language="JavaScript" xml:space="preserve">
      //<![CDATA[
      oElement1 = document.getElementById('oldcontent'); 
      oElement2 = document.getElementById('newcontent');
      oElement1.innerHTML = oElement2.innerHTML;
      //]]>
    </script>
  </body>
</html>

Every browser uses the defer attribute differently, so there really isn't one code does all trick to make this work... You will need to make conditions for other browsers..

Good luck...