最近总在微软AJAX论坛上遇到关于在UpdatePanel中内嵌Javascript的问题.
问题出现的原因是AJAX只是用从服务器端返回的数据替代代表某个UpdatePanel的DIV的InnerHTML.而这些内容并没有被Javascript解释器解释执行.其中所有的Javascript都不可使用.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="ScriptLoader.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
function EndRequestHandler(sender, args)
{
window.ScriptLoader.loadScript("testScript","JScript.js",null);
}
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<input id="Button2" type="button" value="button" onclick="return test()" />
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
function test()
{
alert("Hello!");
}
没点击Button1前点击Buton2会出错,点击Button1后再点击Buton2不会出错.
问题出现的原因是AJAX只是用从服务器端返回的数据替代代表某个UpdatePanel的DIV的InnerHTML.而这些内容并没有被Javascript解释器解释执行.其中所有的Javascript都不可使用.
而用ScriptManager注册的Javascript被放在一个单独的地方返回,并且AJAX会显式地加载它们.
那么我们可不可以直接在客户段手动地加载内嵌的Javascript呢?毕竟使用内嵌的Javascript是很多Web开发人员的习惯.
当然可以!
我们需要动态地创建Script元素,然后把我们的代码放在里面,这样就可以了.
我这里直接用我今天写的ScriptLoader.代码实例如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <script src="ScriptLoader.js" type="text/javascript"></script></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript"> function EndRequestHandler(sender, args) {
window.ScriptLoader.loadScript("testScript","JScript.js",null); } Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); </script> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Panel ID="Panel1" runat="server"> <input id="Button2" type="button" value="button" onclick="return test()" /> </asp:Panel> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </ContentTemplate> </asp:UpdatePanel> </div> </form></body></html> function test() { alert("Hello!"); }没点击Button1前点击Buton2会出错,点击Button1后再点击Buton2不会出错.
浙公网安备 33010602011771号