2016-02-05 84 views
1

我試圖加載圖表中的IFRAME(使用Highcharts),我加載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/

我的目標是讓用戶設定爲自己的DATAS(數據2),所以我選擇一個iframe來鎖定他從我的主窗口,因爲他可以在highcharts使用的功能,所以我可能會添加一些沙箱標籤在我的iframe時,第一部分將工作。

+0

您需要確定您在iframe中加載的頁面中包含Highcharts。 iframe是一個單獨的窗口,不會自動訪問其父項的所有內容。 **在你的小提琴的情況下,你需要確保你包括Highcharts - 我沒有看到它在你的資源列表**。 – jlbriggs

+0

謝謝,但Highcharts被加載在iframe使用jQuery L.64,65和66 –

+0

如何使用Highcharts構造函數?一個是'new Highcharts.Chart(options,callback)',第二個是'Highcharts.chart(容器,選項,回調)'。它看起來像jQuery尚未加載,所以構造函數不附加到'$'命名空間。 –

回答

2

我想你不應該用那樣的JavaScript注入你的腳本。 而是創建一個動態頁面就像所有內容就會容易得多iframe.php。

I幀有限制的權利和加載你的腳本的方式並不能保證你就會爲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> 
+0

我結束了使用其他內容而不是iframe,但您的解決方案工作perfeclty!非常感謝 ! –

+0

你用@Nico_做了什麼? –

+0

我回到@mymyoux的iframe解決方案,我不能安全地覆蓋我需要的每個案例(我使用了div,並且用javascript更改了html代碼,但由於我希望用戶能夠輸入數據, iframe更好地防止安全問題,否則用戶可能會破壞我的頁面)。 –