Question

我有一个html页面，其中包含一些用于从Google API生成图表的JavaScript。当我直接访问页面时，它按预期工作，显示图表。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', { 'packages': ['corechart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
   //// code to generate chart
   var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
   chart.draw(data, options);
}
</script>
<div id="chart_div">
   Chart Div
</div>

我想将此图表加载到另一页上。我尝试使用JQuery的$ .get和$ .load，但两者都没有用。如果我向页面添加一些文本并调用get / load我可以看到文本而不是图表 - 似乎Javascript没有执行。

我添加alert('msg')并看到google.load已被调用，但没有其他JS被调用。

从我想要的其他页面包括图表我有以下JS：

$(document).ready(function () {
    $('#test').load('chart?param=1', function () {
        alert('Load was performed.');
    });
});

但'加载已执行'永远不会被击中。

Answer 1

“SCRIPT5009：'google'未定义”

我怀疑当你.load（）代码块时，这个<script type="text/javascript" src="https://www.google.com/jsapi"></script>不起作用。由于jQuery已经在运行，请试试这个

<!-- get rid of this <script type="text/javascript" src="https://www.google.com/jsapi" -->
<script type="text/javascript">
// does not need $(function()) unless you're running this on its own
// when loading this in using $.load() it's already ready.

$.getScript('https://www.google.com/jsapi', function(){
    google.load('visualization', '1.0', { 'packages': ['corechart'] });
    google.setOnLoadCallback(drawChart);
});
function drawChart() {
   //// code to generate chart
   var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
   chart.draw(data, options);
}
</script>

包含JavaScript的JQuery.load（）页面

1 个答案: