如何执行使用弹出窗口本身内的源页面中的Javascript在html弹出窗口中实时创建/打印的function（）？

Question

我有一个源HTML页面，通过单击通用按钮从中打开虚拟（未绑定到文件）弹出窗口，并在其中弹出innerHTML中的一些HTML和Javascript代码。

这是源页面的简短简化摘录，其中定义了弹出窗口的Html + Javascript内容并打开它：

<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>

我的问题是我无法使fxMessage()函数正常工作，它根本什么也没做。

我也使用了eval()方法，试图使字符串成为实时可执行代码：

// 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>';

由于实际代码更复杂，所以我需要使用function（）来简化一些我必须编写的递归调用，以便在弹出窗口本身中动态地构建更多的html对象，所以我真的很介意编写所有onClick事件中的代码；我不愿意做的另一件事是让弹出窗口加载存储在硬盘中的html文件，在其中我已将所有retVal都写为其html，以便能够具有fxMessage()函数正常工作：弹出窗口必须只是一个虚拟页面，仅在打开时间位于内存中。

我的问题是：有没有办法在弹出窗口中将fxMessage()提升为功能，使其正常工作？

Answer 1

如果您在页面加载后尝试通过<script>插入一些innerHTML，它将无法正常工作（我已经在昨天here中进行了说明）。

因此，将fxMessage的声明移到您的脚本中，例如：

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

并且简单地称它为onclick="fxMessage()"，在这里不需要eval。

Answer 2

这有多酷？

<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>

基本上，不会执行添加了.innerHTML的脚本。为此，您需要创建一个脚本节点并将其附加到子窗口的HEAD