为什么 JS 调用点击按钮后 IE 不刷新页面？答案

【问题标题】：Why IE does not refresh the page after a JS call to a click button?为什么 JS 调用点击按钮后 IE 不刷新页面？
【发布时间】：2011-09-28 08:01:10
【问题描述】：

在 ASP.Net 页面上，我只遇到了 IE 的问题。这是描述。

在一个页面上，有两个按钮和一个标签。第一个按钮是可见的，并在点击事件上调用一个 JS 函数。这个JS函数调用了第二个按钮的点击函数。第二个按钮在 click 事件上有一个 C€ 事件处理程序。 C# 事件处理程序编辑标签。

在 Firefox 中：标签在点击后被正确编辑。在 IE (8) 中：标签未编辑，尽管 C€ 事件处理程序已正确命中。

另外，我观察到，在 IE 中，Page_Load 事件在 JS 按钮单击后被调用了两次： Page_Load button2_OnClick => 更改标签文本 Page_Load => 标签文本被重置:(

在 Firefox 中，Page_Load 只被调用一次。

我的问题是：如何让 IE 在单击 JS 按钮后像 Firefox 一样正确刷新页面？

下面是示例测试代码：

1) 页面 ASPX

<head runat="server">
    <title></title>
    <script type="text/javascript">
        function button1Click(sender, args) {
            var button2 = document.getElementById("button2");
            button2.click();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button runat="server" ID="button1" Text="Click-me!" OnClientClick="button1Click();" />
        <asp:Button runat="server" ID="button2" Text="Second" OnClick="button2_OnClick" style="display:none" />
        <p />
        <asp:Label runat="server" ID="label1" Text="Init" />
    </div>
    </form>
</body>
</html>

2) C# 代码隐藏：

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void button2_OnClick(object sender, EventArgs e)
    {
        label1.Text = "Changed";
    }
}

【问题讨论】：

标签： c# javascript asp.net internet-explorer

【解决方案1】：

您的按钮在呈现时的 ID 不会是 button1 或 button2。它可能类似于 ctl001_button1。因此，您的 javascript 将无法正常工作。在 ASP.NET 4 中，您可以使用分配的 ClientID 覆盖此行为。

    <asp:Button runat="server" ID="button1" Text="Click-me!" 
           OnClientClick="button1Click();" ClientIDMode="Static" />
    <asp:Button runat="server" ID="button2" Text="Second" 
           OnClick="button2_OnClick" style="display:none" ClientIDMode="Static" />

顺便说一句，这暗示了 ASP.NET Winforms 的主要问题 - 它欺骗开发人员认为 Web 是一个连接的环境。

默认情况下，当您单击<asp:Button /> 元素时实际发生的是调用回发。 IE。您的浏览器向服务器发送新页面的请求。它发送一个叫做 ViewState 的东西，服务器通过它知道你做了什么以及要渲染什么。没有这样处理的“事件”。

【讨论】：

我使用的是 ASP.Net 3.5，所以我不能使用它。此外，button1 和 button2 在最终客户端页面中呈现为相同的 ID，而不是像 ctl001_button1 这样的东西。
我在第一篇文章中添加了一个有趣的信息：“另外，我观察到，在 IE 中，在 JS 按钮单击 [...] 后会调用两次 Page_Load 事件”。
尝试在您的button1Click() 方法中添加return false。
正确答案大卫尼尔！我尝试成功的方法： - 放： OnClientClick="return button1Click();" - 在 button1Click 函数的末尾放置一个 return false。那没关系。谢谢！

【解决方案2】：

我认为问题在于您尝试获取隐藏按钮的方式

var button2 = document.getElementById("button2");

也许改成

var button2 = document.getElementById("<%= button2.ClientID %>");

在浏览器中渲染按钮后，ID由ASP.Net引擎更改，与您的来源不同。

http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx

希望这会有所帮助。

【讨论】：

这主意不错，但并没有解决问题，因为button2已经被正确检索，并且click方法被正确调用。
Doh，我阅读了上一篇文章中的更新。但是为什么第一个按钮是一个asp.net控件让我很困扰，你真的应该用一个html输入按钮替换它，然后从那里调用javacript。
你到底想达到什么目的？