向 ASP.NET 网页动态添加客户端脚本 转
向 ASP.NET 网页动态添加客户端脚本
RegisterClientScriptBlock |
向页的顶部添加一个脚本块。以字符串形式创建脚本,然后将其传递给方法,方法再将脚本添加到页中。可以使用此方法将任何脚本插入到页中。请注意,脚本可能在所有元素完成之前呈现到页中;因此,您可能无法从脚本中引用页上的所有元素。 |
RegisterClientScriptInclude |
与 RegisterClientScriptBlock 方法类似,但此方法将添加引用外部 .js文件的脚本块。包含文件在任何其他动态添加的脚本之前添加;因此,您可能无法引用页上的某些元素。 |
RegisterStartupScript |
向页中添加一个脚本块,该脚本块在页完成加载后引发页的 onload 事件之前执行。该脚本通常不创建为事件处理程序或函数;它通常只包含要执行一次的语句。 |
RegisterOnSubmitStatement |
添加响应页的 onsubmit 事件而执行的脚本。该脚本在提交页之前执行,允许您取消提交。 |
Reponse.Write(…) |
把脚本块添加到Html代码的最顶部 |
详细说明
1. RegisterClientScriptBlock
protected void Page_Load(object sender, EventArgs e)
{
string alertString = "<script>alert('你好!我是RegisterClientScriptBlock方法产生的!');alert(document.getElementById('myInput').value);</script>";
ClientScript.RegisterClientScriptBlock(this.GetType(), "Hello", alertString);
}
页面加载时效果如下:
调试进去后发现:
去掉alert(document.getElementById('myInput').value)后,程序执行正常。
//去掉alert(document.getElementById('myInput').value);
string alertString = "<script>alert('你好!我是RegisterClientScriptBlock方法产生的!');</script>";
查看页面代码:
结论:
(1) 此方法注册的脚本块(alert(‘someting’)会阻塞页面加载,加载时页面会一片白。
(2) 证实了无法从脚本中引用页上的所有元素。在该实验中脚本块无法引用页上的Input文本框的内容。
2. RegisterClientScriptInclude
猜测:该方法可以把外部的JS文件包含到页面中来,页面就可以调用JS文件中定义的方法和变量。
protected void Page_Load(object sender, EventArgs e)
{
ClientScript.RegisterClientScriptInclude(this.GetType(), "AlertNum()", "Script/JScript.js");
}
Jscript.js文件的内容:
// JScript File
function AlertNum()
{
var num = 0;
alert(num);
}
1) 代码调用情况:
<form id="form1" runat="server">
<div>
<script>
AlertNum();
</script>
<img src="Images/help_001.jpg" />
</div>
</form>
2) 代码调用情况:
<form id="form1" runat="server">
<div>
<img src="Images/help_001.jpg" />
<script>
AlertNum();
</script>
</div>
</form>
执行效果:
两种调用情况比较:1)会阻塞页面的加载(一片白);2)不会阻塞页面的加载;
估计是代码的调用位置造成的。
3. RegisterStartupScript
protected void Page_Load(object sender, EventArgs e)
{
string script = "<script>alert('Hello World!');</script>";
ClientScript.RegisterStartupScript(this.GetType(), "Hello", script);
}
页面代码:
<head runat="server">
<title>Untitled Page</title>
<script>
function AlertScript(obj)
{
alert(obj);
}
</script>
</head>
<body onload="AlertScript('OnLoad')">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
执行效果如下:
查看生成的页面代码:
结论:(1)由该方法注册的alert(‘something’)不会阻塞页面的加载(一片白)。
(2)证实了由该方法注册的脚本块在页完成加载后引发页的 onload 事件之前执行。
4. RegisterOnSubmitStatement
作用:添加响应页的 onsubmit 事件而执行的脚本。
protected void Page_Load(object sender, EventArgs e)
{
string script = "<script>alert('Hello World!');</script>";
ClientScript.RegisterStartupScript(this.GetType(), "Hello", script);
}
执行效果:
查看页面代码:
5. Reponse.Write(…)
作用:把脚本块添加到Html代码的最顶部。
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("<script>alert('Resopne Write Hello World!')</script>");
}
执行效果:
生成的页面代码:
结论:(1)把脚本块添加到Html代码的最顶部。
(2)此方法生成的脚本块(alert(‘something’))会阻塞页面的加载。
6. 生成脚本块的综合对比
protected void Page_Load(object sender, EventArgs e)
{
string script = "<script>alert('你好!我是RegisterStartupScript方法产生的!');</script>";
ClientScript.RegisterStartupScript(this.GetType(), "Hello", script);
string alertString = "<script>alert('你好!我是RegisterClientScriptBlock方法产生的!');</script>";
ClientScript.RegisterClientScriptBlock(this.GetType(), "Hello", alertString);
Response.Write("<script>alert('你好!我是通过Response.Write()产生的!')</script>");
String scriptText = "return confirm('submit the page?')";
ClientScript.RegisterOnSubmitStatement(this.GetType(), "ConfirmSubmit", scriptText);
}
执行效果:
生成后的页面代码:
结论:(1)脚本块的生成位置不同,这一点可能影响脚本的执行顺序。
(2)脚本挂接的事件不同,执行的时刻也不同。如RegisterOnSubmitStatement是注册到onsumbit事件上的,只有在页面提交时才执行。
(3)从RegisterClientScriptInclude可以看出,脚本块是否会是否会阻塞页面的加载要看脚本调用的位置。
因此,脚本的执行顺序,以及是否会阻塞页面的加载要具体情况具体分析。
一般情况:
方法 |
注册的脚本块(alert())是否会阻塞页面加载 |
RegisterClientScriptBlock |
是 |
Reponse.Write(…) |
是 |
RegisterStartupScript |
否,页面加载完成后才执行 |
RegisterClientScriptInclude |
要看脚本块的调用位置 |