在动态iFrame中渲染Highcharts

Question

我正在尝试在iFrame中动态创建的div中渲染Highcharts。

html部分：

<div id="fr">Get iframe</div>
<div id="ch9">
<div id="chart3"> chart2</div>
</div>
<p><iframe id="ifr"></iframe></p>

jQuery部分：

1. 在iframe中创建一个div：

   var iframeContent;
    $(function () {
            $("#fr").click(function () {
                $('#ifr').contents().find('body').html($('#ch9').html());
                iframeContent = $('#ifr').contents().find('#ch3');
            });
   

2. 尝试将高图加载到iframeContent元素（代码片段）中：

   .....
   chart2= new Highcharts.Chart({
           chart: {
       renderTo:iframeContent,
               type: 'spline',
   ......
   

但它不起作用并抛出错误

Object has no method setAttribute

我该如何解决这个问题？

由于

Answer 1

您无法通过iframe在包装元素内的元素上调用脚本。您无权访问此元素。

Answer 2

将id传递给

renderTo : 'containerId'

如果你想使用一个对象，那么用iframeContent[0]提取它的id或者提取它的id，然后把它传递给图表。

编辑：另一个例子。

如果您使用的是highcharts 3. *您可以使用$（“＃container”）。highcharts（{}）;这里它等同于iframeContent..highcharts（{}）;