如何从 UpdatePanel 回调中调用 javascript 函数（带有更改的主体）？答案

【问题标题】：How to call javascript function (with changing body) from UpdatePanel callback?如何从 UpdatePanel 回调中调用 javascript 函数（带有更改的主体）？
【发布时间】：2019-09-24 00:02:00
【问题描述】：

我通过在那里注入 JavaScript 函数来更新 div。我正在使用更新面板。问题是这个 JS 函数的主体发生了变化。每次用户单击按钮时，都会将新的 JS 函数（函数名称始终相同）放入同一个 div 但具有不同的主体。函数体的这种变化内容的原因是新数据。

对我来说，结果是当我调用这个函数时，我总是执行那个 div 中的第一个函数。 div 的内容发生了变化 - 我已经检查过了。

我试过了：

Sys.Application.add_load(GetMyChart)
pageRequestManager.add_endRequest(EndRequestHandler)
ScriptManager.RegisterStartupScript
Page.ClientScript.RegisterStartupScript
Page.ClientScript.RegisterClientScriptBlock

<form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div id="chart1" runat="server" >
                        <script type="text/javascript">
                            function GetMyChart() { alert("wow!"); }
                        </script>
                    </div>

                    <asp:Label ID="Label1" runat="server" Text="old text"></asp:Label>
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
    <script type="text/javascript">
            var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
            pageRequestManager.add_endRequest(EndRequestHandler);

        function EndRequestHandler(sender, args) {
            GetMyChart(); 
        }
    </script>


protected void Button1_Click(object sender, EventArgs e)
        {
            chart1.InnerHtml = GetChartFunction();
        }

在此处显示的代码中，我总是很警觉。我的目标是调用 GetChartFunction() 返回的 GetMyChart 函数，我需要在更新后立即调用它。

【问题讨论】：

GetChartFunction() 创建了什么？它是定义新的GetMyChart 函数的脚本块吗？如果 JavaScript 已经使用该名称定义了一个函数，则不清楚定义一个具有相同名称的新函数是否会替换旧函数。您能否生成一个不同的名称并让发出的脚本块调用该函数而不是使用add_endRequest？
$(document).ready(function () { PageRequestManager.getInstance().add_endRequest(MYFUNCTION); }); 应该在每次更新面板更新时运行？
@Jacob，GetChartFunction() 返回<script type="text/javascript"> function GetMyChart() { //changing_body } </script>
@Jacob，即使我给了不同的名字，那么如何调用这个函数呢？这个：<script type="text/javascript"> function XYZ() { //changing_body } XYZ();</script> 不起作用。如果我在add_endRequest 中调用XYZ();，那么我会出错。 XYZ is not defined
@EGC，我不想使用 jQuery 或任何其他外部库。

标签： javascript c# webforms updatepanel

【解决方案1】：

上面的代码不起作用，因为您返回并将<script type="text/javascript"> function XYZ() { //changing_body } XYZ();</script> 字符串分配到chart1 div 的内部HTML，这并不意味着它会创建具有函数覆盖的新<script> 标记。

简而言之，返回的值被当作普通的字符串处理，这不是向 DOM 树中添加新元素的正确方式。

此外，我能够在不使用 .Net 的原生 JavaScript 中重现它，下面是示例： https://jsfiddle.net/qt1v6mof/

为了达到预期的效果，一定要使用文档的createElement函数来创建一个真正的<script>标签元素，然后用appendChild替换当前div的innerHTML内容，比如在下面的代码和示例中：

<div id="chart">
  <script type="text/javascript">
        var getMyChart = function() { alert("wow!"); }
  </script>
</div>

<button id="changeBtn">Change getMyChart's body</button>
<button id="callEndRequest">Call endRequestHandler</button>

function change() {
    var newScript = document.createElement('script'),
    chartElem = document.getElementById('chart')

  chartElem.innerHTML = ''
  newScript.setAttribute('type', 'text/javascript');
  newScript.innerHTML = 'getMyChart = function() { alert("new body");}'

  chartElem.appendChild(newScript)
}

function endRequestHandler () {
    getMyChart()
}

changeBtn.onclick = change
callEndRequest.onclick = endRequestHandler

getMyChart()

现场示例：https://jsfiddle.net/9mdeoLb2/

希望它会有所帮助你。亲切的问候！

【讨论】：