我正在尝试在iframe中加载图表(使用Highcharts),我加载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时在其iframe中添加一些沙盒代码部分会起作用。

最佳答案

我认为您不应该使用javascript注入脚本。
而是使用所有内容创建一个像iframe.php这样的动态页面,它将变得更加容易。

iframe具有受限制的权利,并且您加载脚本的方式并不能保证您会一一完成

有关iframe.php内容的快速示例,只需在iframe URL中传递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>

关于javascript - 在iframe中加载Highcharts,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35225380/

10-12 00:05
查看更多