0

I have a source HTML page from which I open a virtual (not bound to a file) pop-up by clicking a generic button and by which I push some Html and Javascript code in its innerHTML.

This is a short simplified extract of the Source Page in which I define the Html+Javascript content of the pop-up and open it:

<script language="javascript">
<!--
    function fxOpenWindow()
    {
        // Init objects
        var retVal = ''; // contains the Html+Javascript to push in the pop-up innerHTML
        var popup  = ''; // pop-up to open, not generated by loading a file but only by pushing the "retVal" code inside its innerHTML


        // constructing the HTML to push

        // defining a function() to show a simple alert : "1"
        retVal = retVal + '<script>';
        retVal = retVal + '  function fxMessage() { alert(1); }';
        retVal = retVal + '</script>';

        // defining the html object with which execute the above function
        retVal = retVal + '<button onClick="fxMessage();">CLICK ME</button><br>';


        // opening the virtual POPUP

        popup = window.open('','title');
        popup.document.body.innerHTML = retVal;
        popup.focus();
    }
-->
</script>

<button onClick="fxOpenWindow();">OPEN THE POP-UP WINDOW AND SHOW ITS CONTENT</button>

My problem is that I can't make the fxMessage() function work, it just doesn't do anything at all.

I have used the eval() method too, trying to make the string become live executable code:

// all these methods are a "NO-GO"
retVal = retVal + '<button onClick="fxMessage();">CLICK ME</button><br>';
retVal = retVal + '<button onClick="eval(fxMessage);">CLICK ME</button><br>';
retVal = retVal + '<button onClick="eval(fxMessage());">CLICK ME</button><br>';

// the "direct method" is the only one that works:
retVal = retVal + '<button onClick="alert(1);">CLICK ME</button><br>';

Since the real code is more complex, I have the need to use a function() for simplifying some recursively calls I have to write in order to dynamically build more html objects in the popup itself, so I DO really mind to write all the code inside the onClick event; another thing I'm not willing to do is to have the pop-up load a html file stored on the hard-disk in which I have wrote all the retVal as its html in order to be able to have the fxMessage() function working correctly: the pop-up must be just a virtual page resident only in memory the time is open.

My question is : is there a way to have the fxMessage() to be elevated a as function in the pop-up and make it work out its job?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
F. Bas
  • 31
  • 7

3 Answers3

1

If you try to insert some <script> by innerHTML after the page load, it won't work (I've explained it yesterday here).

So, move the fxMessage's declaration to your script, like:

<script>
fxOpenWindow(){
  //Code here
}
fxMessage(){
  //Code here
}
</script>

And call it simply onclick="fxMessage()", no need for eval here.

FZs
  • 16,581
  • 13
  • 41
  • 50
  • So I have to have all the Javascript in the source-page and push out the results up to the pop-up; I'll read your explanation you linked me carefully. Thank you FZs for your solution, – F. Bas Oct 01 '19 at 14:17
  • @F.Bas I'm glad that helped. Additional note to the linked answer: since that question was a bit different, the solution differs too; but the reason of the problem is the same. – FZs Oct 01 '19 at 14:32
0

How cool is this ?

<script language="javascript">
<!--

    function fxOpenWindow(id) {
      var win = window.open('');
      var script = document.createElement('script');
      script.text = 'function fxMessage() { alert(1); }';
      win.document.head.appendChild(script);
      var retVal = '<button onClick="fxMessage();">CLICK ME</button><br>';
      win.document.body.innerHTML = retVal;
    }
-->
</script>

<button onclick="fxOpenWindow();">OPEN THE POP-UP WINDOW AND SHOW ITS CONTENT</button>

Basically, scripts added with .innerHTML aren't executed. For this you need to create a script node and append it to the child window's HEAD

Bilal Siddiqui
  • 3,579
  • 1
  • 13
  • 20
  • I like the use you make of the [document] object, it comes in handy in a lot of ways; your solution is working even in less fewer lines than mine too, and that is always a good thing. Thank you Bilal. – F. Bas Oct 01 '19 at 14:22
  • Happy to help ! you can close this issue now I guess :) – Bilal Siddiqui Oct 01 '19 at 15:40
0

My specific need is to have the pop-up to be able to create html objects inner-self using a function() (fxMessage() { ...create html objects... }); I have put at work all your answers in different scenarios; there are some differences between the two methods and both of them are working fine and smooth.

F. Bas
  • 31
  • 7