向 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 |
要看脚本块的调用位置 |
