创建母版页导致js出现“ 'document.getElementById(...)' 为空或不是对象”错误
导读：一个控件在设计时的ID往往不同于生成页面后的ID，为了获得控件客户端ID，我们可以从生成的页面入手，冷静思考，把握主次，从底层框架入手 本文将为大家介绍一下 ASP.NET中在创建母版页时引来的麻烦，并分析了问题产生的实质，大家在实际操作中多多注意一下。
一、问题提出 由于总体排版和设计的需要，我们往往创建母版页来实现整个网站的统一性，最近我由于统一性的需要，把原来整个项目单独的页面全部套用了母版页。但是出现了一个错误……在我的Blog中记录一下，方便大家参考。 二、 抽象模型 由于整个页面内容过多，所以我把这个页面中最为本质的问题抽象出来。 原来单一页面，就是利用按钮触发JS事件，在文本域中插入“(_)”功能，其实现代码如下： 以下是引用片段： <%@ 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>单一页面抽象模型－YJingLee</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<textarea id="txt" runat="server" name="txt" rows="10" cols="50"></textarea>
<asp:Button ID="btnInsert" runat="server" Text="服务器端插入(_)" OnClientClick="insert();"/>
<input id="btnInsert2" name="insert" onclick="insert();" type="button" value="客户端插入(_)" runat="server"/></div>
</form>
</body>
</html>
上述页面可以正常使用。后来使用模板页后，其代码如下： 以下是引用片段：
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="使用母版页面抽象模型－YJingLee" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
<div>
<textarea id="txt" runat="server" name="txt" rows="10" cols="50"></textarea>
<asp:Button ID="btnInsert" runat="server" Text="服务器端插入(_)" OnClientClick="insert();"/>
<input id="btnInsert2" name="insert" onclick="insert();" type="button" value="客户端插入(_)" runat="server"/></div>
</asp:Content> 当打开后按下按钮出现了“Microsoft JScript 运行时错误: 'document.getElementById(...)' 为空或不是对象”。这是什么原因呢?原来好好的，怎么套用个母版页就出现这个奇怪的问题呢?困扰了好久，和朋友讨论了一下，终于找到了答案…… 三、分析本质 原来我们仔细看看其生成的HTML代码： 单一页面： 以下是引用片段：
<!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><title> 单一页面抽象模型－YJingLee</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
</head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTEzMjE5NDA0NWRkKlEH1jSXJkIbnUaP2d9Dra8LQEk=" />
</div>
<div>
<textarea name="txt" id="txt" rows="10" cols="50"></textarea>
<input type="submit" name="btnInsert" value="服务器端插入(_)" onclick="insert();" id="btnInsert" />
<input name="btnInsert2" type="button" id="btnInsert2" onclick="insert();" value="客户端插入(_)" /></div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBALVid/5DQKShrDCCQL5w9POBQL5w4vOBZPGqxUU/yvoKTqG8k+uG8YroGTv" />
</div></form>
</body>
</html> 再看看套用母版页之后，生成的HTML代码： 以下是引用片段：
<!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><title>使用母版页面抽象模型－YJingLee</title></head>
<body>
<form name="aspnetForm" method="post" action="Default2.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTEwMTY2NjE0OWRkADUETiohcorj2qXOE9M1qhFVw20=" />
</div>
<div>
<script language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
<div>
<textarea name="ctl00ContentPlaceHolder1txt" id="ctl00_ContentPlaceHolder1_txt" rows="10" cols="50"></textarea>
<input type="submit" name="ctl00ContentPlaceHolder1btnInsert" value="服务器端插入(_)" onclick="insert();" id="ctl00_ContentPlaceHolder1_btnInsert" />
<input name="ctl00ContentPlaceHolder1btnInsert2" type="button" id="ctl00_ContentPlaceHolder1_btnInsert2" onclick="insert();" value="客户端插入(_)" /></div>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKyga4JAtO59ZELApOT2tEDApOTwvAC83bfMO00kt0PYcRte7XQOsXBcFE=" />
</div></form>
</body>
</html> 是不是看到问题了，源文件控件元素的ID和生成HTML文件的ID不一致。表单from的name属性和id属性变成了aspnetForm，控件的id属性被无缘无故了加上了ctl00_ContentPlaceHolder1_前缀，其name属性也加上了ctl00ContentPlaceHolder1前缀。 这下知道了，难怪提示“'document.getElementById(...)' 为空或不是对象”的错误了，原来生成页面后其ID都变了。 那么我们如何解决它呢?既然他id变了，我们就把JS代码id改为生成后的id。代码如下： 以下是引用片段：
function insert() {
document.getElementById("ctl00ContentPlaceHolder1txt").value=document.getElementById("ctl00ContentPlaceHolder1txt").value+"(__)";
return;
}
//或者
function insert() {
document.getElementById("ctl00_ContentPlaceHolder1_txt").value=document.getElementById("ctl00_ContentPlaceHolder1_txt").value+"(__)";
return;
} 好了，问题解决了，不过想想有什么更好的办法呢?到底为什么呢? 其实分析一下，它是后来生成的客户端id，我们可以用C#语句Control的ClientID属性，像这样写：txt.ClientID; txt还是原来控件的id，后面的ClientID就是新生成的id。txt.ClientID是从程序里取到的后来生成新的id，这样不是更好吗。修改代码如下： 以下是引用片段：
function insert() {
document.getElementById("").value=document.getElementById("").value+"(__)";
return;
} 还有在后台Request.Form["txt"]键值需要改变，必须变为Request.Form[""]才能接收到页面的值。想想如果想要得到ID的control是一个用户控件的话，当生成页面后尽管能得到其ClientID，但是却得不到这个对象，所以也就不能设置或获得其属性了。比如，我要做的这个用户控件，由三个DropDownList组成，可是我却想得到一个完整的日期值(指在客户端)，一种思路是先获得三个DropDownList的ClientID，然后再由ID1.value+ID2.value+ID3.value取得，可是如果你一个页面上需要放多个这样的用户控件的话，你需要取得多少个ClientID?显然这样做的话，工作量会很大，而且要操作众多的对象，很容易出错。 四、总结 这一类问题我像在我们编写程序时往往经常会遇到，总结一下：这应该属于“使用了MasterPage，或者GridView中的模版列后所有元素ID不一致问题”。由于种种原因(比如使用了MasterPage，或者GridView中的模版列)，一个控件在设计时的ID往往不同于生成页面后的ID，为了获得控件客户端ID，我们可以从生成的页面入手，取控件id有以下三种修改方法：(当然我还是推荐第三种) 以下是引用片段：
document.getElementById("ctl00编辑区ID控件ID");
document.getElementById("ctl00_编辑区ID_控件ID");
document.getElementById(""); 至于为什么，是自己还没有深刻理解其中的根源还是.NET机制问题呢? 在我们设计时往往就会出现一些莫名其妙的问题，我想我们遇到问题时，冷静思考，把握主次，从底层框架入手，纠其原因，相信最终会找到答案。
来源：http://blog.csdn.net/lzt7/archive/2008/05/14/2445800.aspx
创建母版页导致js出现“ 'document.getElementById(...)' 为空或不是对象”错误的更多相关文章
- js用document.getElementById时要注意！
<!DOCTYPE html> <html lang="en"> <head> <script src="http://code ...
- JS中 document.getElementById 对象
Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 提示:Document 对 ...
- 关于as3调用js报“null为空或不是对象”错误
主要原因是:flash插件的object对象无ID属性. 顺便说下as3调用js的方法. as3引用: import flash.external.ExternalInterface; as3中调用 ...
- js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...
- document.getElementById("id").value与$("#id").val()之间的区别
本文链接:https://blog.csdn.net/mottohlm/article/details/78364196....今天在项目中遇到这么一个JS报错:原因是代码中有这么一段:对,就是var ...
- js中document的用法小结
document常用属性: document.title//设置文档标题,与HTNL中的title标签等价 document.bgColor//设置页面背景颜色 document.fgColor//设 ...
- document.getElementById()与 $()区别
document.getElementById()返回的是DOM对象,而$()返回的是jQuery对象 什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象.jQuery对象 ...
- jquery中的$("#id")与document.getElementById("id")的区别
以前一直认为jquery中的$("#id")和document.getElementByIdx_x("id")得到的效果是一样的,今天做特效的时候才发现并不是这 ...
- document.getElementById(“id”)与$("#id")的区别
document.getElementById("id")可以直接获取当前对象, jQuery利用$("#id")获取的是一个[object Object],需 ...
随机推荐
- android学习笔记七——控件(DatePicker、TimePicker、ProgressBar)
DatePicker.TimePicker ==> DatePicker,用于选择日期 TimePicker,用于选择时间 两者均派生与FrameLayout,两者在FrameLayout的基础 ...
- flash bulider 生成app无法安装在xcode模拟器上
使用flash bulider开发app在ios模拟器上运行,出现以下错误 错误提示是isb与当前设备的osx不符合.当前使用airsdk版本是4.0,xcode5.1.1. 查看了air13sdk的 ...
- java面试常考题
基础知识: 1.C++或Java中的异常处理机制的简单原理和应用. 当JAVA程序违反了JAVA的语义规则时,JAVA虚拟机就会将发生的错误表示为一个异常.违反语义规则包括2种情况.一种是JAVA类库 ...
- apache/php 开启 gzip压缩
1.php方式开启 原理: header("Content-Encoding: gzip"); echo gzencode('songjiankang'); 示例1: functi ...
- ylbtech-Unitity-CS:Indexers
ylbtech-Unitity-CS:Indexers 1.A,效果图返回顶部 1.B,源代码返回顶部 1.B.1, // indexer.cs // 参数:indexer.txt using S ...
- 帝国CMS 6.0功能解密之新版结合项功能，帝国结合项使用
可以用来做A-Z信息检索 某字段等于多少,输出 等等 帝国CMS6.0在继承以往版本结合项功能的基础上又新增很多特性,更强大.今天我们就专门来讲解6.0的结合项改进. 回顾下以往版本的结合项语 ...
- linux free命令（转载）
来源:http://www.cnblogs.com/peida/archive/2012/12/25/2831814.html free命令可以显示Linux系统中空闲的.已用的物理内存及swap内存 ...
- Windows XP下安装和配置Apache2.2.22服务器+PHP5+Mysql5
原文:http://www.chinaz.com/web/2012/0516/252021.shtml 随着PHP网站的流行,国内越来越多的站长使用php开发网站或者使用相关的php开源网站(例如:D ...
- Linux下修改网卡的mac地址
方法1: # ifconfig ethX down # ifconfig ethX hw ether NEW_MAC_ADDR # ifconfig ethX up 但是这样重启后就失效了,需要再敲一 ...
- C++学习49 对二进制文件的读写操作
二进制文件不是以ASCII代码存放数据的,它将内存中数据存储形式不加转换地传送到磁盘文件,因此它又称为内存数据的映像文件.因为文件中的信息不是字符数据,而是字节中的二进制形式的信息,因此它又称为字节文 ...