为什么当我的用户控件呈现时 Javascript 无法正常运行？

Question

我使用 HTMLTextWriter 和 StringWriter 的组合来呈现我的用户控件。用于呈现用户控件的代码是通过我页面上某些 Javascript 的 ajax 调用启动的。生成的 StringWriter 文本将返回到 javascript 代码并附加到我的页面。渲染代码如下所示：

Dim sw As New System.IO.StringWriter
If Not IsDBNull(reader.Item("UserControlName")) Then
    'Use Reflection to create the appropriate class.
    'First get the type
    'The usercontrol name is retrieved from my datatable reader
    Dim htmlcontroltype = Type.GetType("MyProject." & reader.Item("UserControlName"))
    If Not IsNothing(htmlcontroltype) Then
        'Create an instance of the class
        Dim htmlcontrol = Activator.CreateInstance(htmlcontroltype)
        htmlcontrol = htmlcontrol.LoadControl("~/" & reader.Item("UserControlName") & ".ascx")
        htmlcontrol.DataBind()
        Dim tw As New HtmlTextWriter(sw)
        htmlcontrol.RenderControl(tw)
    Else
        sw.Write("No matching User Control was found in the project.")
    End If
End If

Return sw.ToString

这将返回我的用户控件，该控件似乎工作正常，直到我尝试使用 Javascript 做任何好的事情。

例如，如果我想要一个谷歌图表，我会粘贴 他们的Javascript到我的用户控件中。就像这样：

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="TestControl.ascx.vb" Inherits="MyProject.TestControl" %>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript">
            google.load("visualization", "1", { packages: ["corechart"] });
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                [ -- snip! -- ]
                var chart = new google.visualization.LineChart(document.getElementById('visualization1'));
                chart.draw(data, { width: 300, height: 250, title: 'Company Performance' });
            }
        </script>
<div id="visualization1" style="width: 300px; height: 300px;"></div>

但是！当我运行该程序时，它会出错，声称“谷歌未定义”。

值得注意的是，这并不限于 Google Charts - 我在 Twitter 搜索 API 和其他 API 中也遇到过类似的问题。另外，放置线

在我的默认或母版页中没有区别。

最后，如果在设计时使用通常的 @Register 指令将用户控件添加到我的母版页中，则此代码将不会出现任何问题 - 让我相信问题是由 StringWriter 引起的。有没有人遇到过类似的问题或者可以阐明这个主题？

Answer 1

我认为问题不在于 google.setOnLoadCallback 等，我认为您存在范围界定问题。试试这个：

google.setOnLoadCallback(function(){drawChart.call(window)});

这将显式地将drawChart函数的上下文设置为可以访问google变量的东西。

Answer 2

我找到了解决该问题的方法，尽管我仍然不知道是什么原因造成的。我将 Google 图表代码放入主页并将其包装到 jQuery 函数中，在加载用户控件时调用它。

这又导致了另一个问题，即 iFrame 在 Firefox 和 Chrome 中返回为空（但在 IE 中却没有，奇怪的是）。此问题已在此处得到解决。

长话短说，它比我想要的更混乱，但最终结果是一样的。