在动态 iFrame 中渲染 Highcharts答案

【问题标题】：Render Highcharts in dynamic iFrame在动态 iFrame 中渲染 Highcharts
【发布时间】：2013-11-11 08:42:05
【问题描述】：

我正在尝试在 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部分：

在 iframe 中创建一个 div：
变量 iframe 内容； $（函数（）{ $("#fr").click(function () { $('#ifr').contents().find('body').html($('#ch9').html()); iframeContent = $('#ifr').contents().find('#ch3'); });
尝试将 Highchart 加载到 iframeContent 元素（代码片段）中：
...... chart2=新的Highcharts.Chart({ 图表： { 渲染到：iframeContent，类型：'样条'， ……

但是它不起作用并抛出错误

Object has no method setAttribute

我该如何解决这个问题？

谢谢

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

将id传递给

renderTo : 'containerId'

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

编辑：另一个例子。

如果你使用 highcharts 3.* 你可以使用 $("#container").highcharts({});这里相当于 iframeContent..highcharts({});

【讨论】：

这不正是我正在做的吗？ 1. 获取元素作为对象： iframeContent = $('#ifr').contents().find('#ch3'); 2. 渲染图表——renderTo:iframeContent。我的代码有什么问题？谢谢！
iframeContent.highcharts({});如果元素在 iFrame 内部，则不起作用。仅当元素在同一窗口中时才有效。