包含JavaScript的JQuery.load（）页面

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>