Question

我试图在iframe中加载图表（使用Highcharts），我加载高图，但控制台返回 $（...）。highcharts不是函数

$('<iframe id="panel_frame_container" frameborder="0"/>').load(function(){
            $('#panel_frame_container').contents().find('body').append("<div id='panel_chart_container'></div>").end()
                                                  .find('body').append('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"><\/script>').end()
                                                  .find('body').append('<script src="https://code.highcharts.com/highcharts.js"><\/script>').end()
                                                  .find('body').append('<script src="https://code.highcharts.com/highcharts-more.js"><\/script>').end()
                                                  .find('body').append('<script src="https://code.highcharts.com/modules/exporting.js"><\/script>').end()
                                                  .find('body').append("<script type='text/javascript'>$(document).ready(function(){console.log('loaded');$('#panel_chart_container').highcharts("+data2+");});<\/script>");
        }).appendTo($(".panel-body"));

https://jsfiddle.net/s82v657e/

我的目标是让用户设置自己的数据（data2），所以我选择一个iframe将他锁定在我的主窗口之外，因为他可以使用highcharts中的函数，所以我可能会添加一些沙盒标签当第一部分工作时，我的iframe。

Answer 1

我认为你不应该用这样的javascript注入你的脚本。而是创建一个像iframe.php这样的动态页面，其中包含所有内容，这将更容易。

iframe具有受限制的权利，而您加载脚本的方式并不能保证您将一个接一个地完成这些操作

iframe.php内容的快速示例，只需传递iframe网址中的data_id：

<?php 
if (isset($_GET['data_id']))
$data = getGraphics( $_GET['data_id']);
?>
<html>
<head>
</head>
<body>
<div id="panel_chart_container"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#panel_chart_container').highcharts(<?=$data;?>);
});
</script>
</body>
</html>

在iframe中加载Highcharts

1 个答案: