javascript - 无法在 UpdatePanel 中执行用于计时器控制的 javascript

Question

我在更新面板中有一个计时器控件，计时器应该执行一些 javascript。

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <asp:UpdatePanel ID="ImagePanel" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
        </Triggers>
        <ContentTemplate>
            <asp:Timer ID="Timer1" runat="server" OnTick="SlideImages" Interval="4000"></asp:Timer>
            <div id="slideshow" runat="server">
                <div runat="server" id="currentImageDiv" class="current">
                    <img id="currentImage" src="" runat="server" class="slideImage current" />
                    <asp:Label  runat="server" id="currentImageCaption" CssClass="caption"></asp:Label>
                </div>
                <div runat="server" id="nextImageDiv" class="next">
                    <img id="nextImage" src="" runat="server" class="slideImage next" />
                    <asp:Label runat="server" id="nextImageCaption" CssClass="caption"></asp:Label>
                </div>
            </div>
            <asp:HiddenField runat="server" ID="slideIndexField" Value="1"/>
        </ContentTemplate>
    </asp:UpdatePanel>    

后面的代码：

protected void SlideImages(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(
            Timer1,
            Timer1.GetType(),
            "SlideImages",
            @"<script src='Scripts/jquery-1.10.1.min.js' type='text/javascript'></script>
            <script type='text/javascript'>
                alert('script executed');
            </script>",
            true);
}

但它似乎不起作用，我必须改变什么？

Answer 1

您可以将处理程序添加到Sys.WebForms.PageRequestManager.instance. End Request event

并直接调用您的客户端功能

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(endRequestHandler);

function endRequestHandler(){
 alert('script executed');
}

Answer 2

哎呀，错误是RegisterStartupScript的最后一个参数：它必须设置为false，因为我已经包含了脚本标签。

Answer 3

我使用以下 javascript 代码在 UpdatePanel 内显示倒计时计时器...，它可以工作。

<script>
  function startTimer() {
    var xMinutes = 10 * 1, 
        duration = xMinutes;
    var timer = duration, minutes, seconds;
    setInterval(function () {
      minutes = parseInt(timer / 60, 10);
      seconds = parseInt(timer % 60, 10);

      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      //[not working]
      // display.textContent = minutes + ":" + seconds;

      //[working]
      document.getElementById("xtime1").innerHTML = minutes + ":" + seconds;
      if (--timer < 0) {
        timer = duration;
        gotomain();
      }
    }, 1000);
  }
</script>