Как выполнить функцию (), созданную / напечатанную в режиме реального времени во всплывающем html, используя Javascript со страницы источника внутри самого всплывающего окна?

Question

У меня есть исходная HTML-страница, с которой я открываю виртуальное (не привязанное к файлу) всплывающее окно, нажимая универсальную кнопку и с помощью которого нажимаю некоторый HTML-код и код JavaScript в его innerHTML.

Это краткое упрощенное извлечение исходной страницы, в котором я определяю содержимое всплывающего окна 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>';

Поскольку реальный код более сложный, мне нужно использовать функцию () для упрощения некоторых рекурсивных вызовов, которые мне нужно написать, чтобы динамически создавать больше объектов HTML в самом всплывающем окне, поэтому я действительно не против написать весь кодвнутри события onClick;я не хочу, чтобы всплывающее окно загружало html-файл, хранящийся на жестком диске, на котором я записал все retVal как его html, чтобы иметь возможность иметь fxMessage()функция работает правильно: всплывающее окно должно быть просто виртуальной страницей, которая находится только в памяти, когда время открыто.

Мой вопрос: есть ли способ повысить fxMessage() как функцию ввсплывающее окно и заставить его работать?

Answer 1

Если вы попытаетесь вставить немного <script> на innerHTML после загрузки страницы, оно не будет работать (я объяснил это вчера здесь ).

Итак,переместите объявление fxMessage в ваш скрипт, например:

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

и назовите его просто onclick="fxMessage()", здесь eval не нужно.

Answer 2

Моя конкретная потребность - иметь всплывающее окно для возможности создания html-объектов внутри себя с помощью функции () (fxMessage () {... create html objects ...});Я применил все ваши ответы в различных сценариях;Есть некоторые различия между этими двумя методами, и оба они работают нормально и гладко.

Answer 3

Насколько это круто?

<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 дочернего окна