在运行时从innerHtml中添加和调用javascript函数

Add and call javascript function at runtime from within innerHtml

本文关键字：调用 javascript 函数 添加 运行时 innerHtml      更新时间：2023-09-26

我正在使用dotnet.highcharts在运行时创建图表：

因此，我使用ajax调用一个接收格式的html。这就是我得到的：

<div id='bbb55283bfc3440a96c7ae26e130173f_container'></div><script type='text/javascript'>
var bbb55283bfc3440a96c7ae26e130173f;
function TestFunction() {
    bbb55283bfc3440a96c7ae26e130173f = new Highcharts.Chart({
        chart: { renderTo:'bbb55283bfc3440a96c7ae26e130173f_container', defaultSeriesType: 'line' }, 
        title: { text: 'Test' }, 
        xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }, 
        series: [{ data: [12, 23, 1, 9, 34, 54] }]
    });
}
</script>

现在我把它放在div元素中（其中数据是上面的片段）：

$(myDiv).innerHtml = data;

接下来我需要调用函数TestFunction()

我该怎么做？它像这样生活在myDiv中：

<div id="chartContainer" style="float:left">
    <div id="bbb55283bfc3440a96c7ae26e130173f_container"></div>
    <script type="text/javascript">
      var bbb55283bfc3440a96c7ae26e130173f;
      function TestFunction() {
        bbb55283bfc3440a96c7ae26e130173f = new Highcharts.Chart({
            chart: { renderTo: 'bbb55283bfc3440a96c7ae26e130173f_container', defaultSeriesType: 'line' },
            title: { text: 'Test' },
            xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] },
            series: [{ data: [12, 23, 1, 9, 34, 54] }]
            });
      }
    </script>

TestFunction不"生活在div内部"。JavaScript不是那种标记的一部分。

一旦定义了功能：

function TestFunction() {
    // code
}

从那时起，它可以作为window对象上的全局函数使用。因此，您可以从页面上的任何其他地方调用它：

TestFunction();

当然，如果这个div以任何方式被重复，并且你假设div中的函数有某种名称空间，那么你会发现在实践中并非如此。如果函数在文档中的任何位置再次被全局定义，那么第二个定义将简单地覆盖第一个定义。

相关文章：