Question

我有一个用户控件，其中包含来自Google chart api的一些图表。

当用户控件被服务器加载和呈现时，通常的方式一切都按预期工作。但是，当我使用ajax webservice渲染控件异步并使用ajax返回html并将其添加到页面时，我在firebug中遇到一些脚本错误（chrome将其称为ReferenceError）：

“google未定义”

我的项目是带有一些javascript的ASP.Net MVP Webforms 我制作了一个示例项目，我重新创建了该问题。 Download it here

控制渲染器代码：

public virtual string RenderControlToString(string path, bool htmlEncode)
{
    StringWriter stringWriter = new StringWriter();
    this.RenderControl(path, (TextWriter)stringWriter);
    string s = stringWriter.ToString();
    if (!htmlEncode)
        return s;
    else
        return HttpContext.Current.Server.HtmlEncode(s);
}

public virtual void RenderControl(string path, TextWriter writer)
{
    var page = new PageForRendering();
    page.Controls.Add(page.LoadControl(path));
    HttpContext.Current.Server.Execute((IHttpHandler)page, writer, true);
}

（省略“需要在表单中”错误 - 页面上有一个表格，控件被添加到其中）

public class PageForRendering : Page
{
    public override void VerifyRenderingInServerForm(Control control)
    {}
}

usercontrol上的脚本：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    console.log("Loading Google Charts...");
    google.load('visualization', '1.0', { 'packages': ['corechart'] });
    console.log("Google Charts loaded!");

    google.setOnLoadCallback(function () {
        ...some code...
    });
</script>

使用firebug我发现https://www.google.com/jsapi已正常加载，但只打印了第一个控制台日志。

我认为这可能是某种范围问题...... 谷歌变量将在此脚本中定义：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

但在这种情况下，它在下一个脚本块中无法访问。正常渲染它可以正常工作。在google.load调用之前，脚本未完成加载，或者google变量现在以某种方式在另一个范围内定义，因为渲染方法不同。

如果我查看firebug DOM，则谷歌变量定义为here。但是我发现，如果我在一个断点处放置一行：google.load('visualization', '1.0', { 'packages': ['corechart'] });，我发现此时谷歌变量没有在DOM中定义。所以它也可能是关于加载脚本的一些想法。但是<script type="text/javascript" src="https://www.google.com/jsapi"></script>行在它之前，它应该同步执行吗？当我在firebug中检查网络时，我也发现文件已正确下载。

我可能还需要提一下，加载ajax代码的usercontrol如下所示：

<div id="statisticsContent">&nbsp;</div>

<script type="text/javascript">
    $(document).ready(function () {
        function getStatisticsView() {
            var id = $(".chooseStatisticsToShow input:radio:checked").val();
            var statisticsType = (id == $(".choosePlayingGroupDropDownList option:selected").val() ? 1 : 0);

            $.ajax({
                cache: false,
                global: false,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: '/Services/StatisticsService.svc/GetStatisticsView',
                data: JSON.stringify({
                    statisticsType: statisticsType,
                    id: id
                }),
                success: function (data) {
                        $("#statisticsContent").html(data.d.ViewHtml);
                }
            });
        }
        getStatisticsView();

        $(".chooseStatisticsToShow").change(function () {
            getStatisticsView();
        });
    });
</script>

我制作了一个示例项目，我重新创建了该问题。 Download it here

Answer 1

在您的服务发送响应后，您使用$("#statisticsContent").html(data.d.ViewHtml);浏览器解释了html并开始并行加载和执行脚本。我怎么知道的？只是体验 - 在我的项目中，每当我尝试注入<script src='...'>浏览器时都没有等待加载脚本，并且立即执行带有自定义代码的下一个script标签。

这是您的情况，您需要等待jsapi加载，然后才执行将加载包并执行图表呈现的代码。这是代码：

<div id="chart_div"></div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    waitForGoogleApiAndLoadPackages();
    function waitForGoogleApiAndLoadPackages() {
        if (typeof (google) === 'undefined')
            setTimeout(waitForGoogleApiAndLoadPackages, 100);
        else {
            google.load('visualization', '1.0', { 'callback': 'renderChart', 'packages': ['corechart'] });
        }
    }

    function renderChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2]]);

        var options = { 'title': 'How Much Pizza I Ate Last Night', 'width': 400, 'height': 300 };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>

另一个有趣的部分是else函数中的waitForGoogleApiAndLoadPackages块。这是Why does google.load cause my page to go blank?问题中描述的问题的解决方法。

引自Why does google.load cause my page to go blank?：

看起来google.load正在使用a将脚本添加到页面 document.write（），如果在页面加载后使用，则会清除 HTML

Asp.net渲染控件 - ＆gt; javascript错误

1 个答案: