javaScript作为外部文件引用时要注意
2008-05-19 21:47
330 查看
在实现某个功能的时候,发现了一个奇怪的问题:单页面应用js没有问题,但是如果应用masterpage,在套用外部js文件时,根据设置的id得到的对象始终为NULL:
*******************************引用一段文字说明 问题所在*******************************
ASP.Net 提供了代码和页面分离的机制,在大多数情况下,这种机制工作得非常好。但是,如果需要使用客户端java脚本来做些工作,你就会遇到麻烦了。问题出在你在设计阶段为server端控件设置的ID值和页面运行时控件实际的ID值不一致。例如,新建一个Web site,增加一个 aspx page,在页面上加入一个text box控件:
<asp:TextBox ID="mytext" Runat=server></asp:TextBox>
运行这个页面,从View source中会看到运行时的结果:
<Input name="mytext" type="text" id="mytext" />
这时我们看到设计阶段的ID值和运行时控件的ID值是一样的,没有问题,这是因为这是一个单纯的aspx页面。如果在页面中包含一个用户自定义的web control或使用了master pages (ASP.NET 2.0),情况就不乐观了。我们增加一个新的user control名为mycontrol.ascx. 在mycontrol.ascx中加入同样的text box。再把这个自定义控件加入到一个aspx 页面, 将此控件的ID设置为myControl. 在浏览器中运行这个页面,得到的html是这样的:
<Input name="myControl:mytext" type="text" id="myControl_mytext" />
text box控件的设计阶段ID= mytext,但运行时得到的ID=myControl_mytext。也就是在原来的ID前面增加了包含text box控件的容器myControl的ID。在使用master pages时,所有的aspx 页面都是被包含在一个容器中的, 而且还常常会有容器的嵌套。如果在客户端使用JavaScript去按照ID查找控件就会失败
*******************************************************************************************
通常这个时候,就要利用控件的ClientID属性来获得运行时ID:
1.在Masterpage的header部分加入对外部js文件的参考,那么所有应用此模板的页面都可以应用这个js文件
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<script src ="JScript.js" language ="javascript" type ="text/javascript" ></script>
2.JS文件定义:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
function showTip(id,oevent,address)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var div=document.getElementById(id);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var result=DbOp.getDetail(address).value;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var arrs=result.split(",");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var show="The ID IS :"+arrs[0]+"<br>"+"The name IS :"+arrs[1];
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
div.innerHTML=show;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
div.style.visibility="visible";
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
div.style.left=oevent.clientX+5;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
div.style.top=oevent.clientY+5;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
function hidTip(id,oevent)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var div=document.getElementById(id);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
div.style.visibility="hidden";
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
3。子页面:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div id="divshow" runat ="server" >
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div id="div2" runat ="server" style =" border :solid 1px red; background :#f0f0f0; visibility :hidden ; position :absolute">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xxxxx
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</asp:Content>
4.CS:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
//some code...
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
gv.Rows[i].Cells[2].Attributes.Add("onMouseover", "showTip('"+div2.ClientID+"',event,'" + address + "')");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
gv.Rows[i].Cells[2].Attributes.Add("onMouseout", "hidTip('"+div2.ClientID+"',event)");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
//code here ...
结合上篇文章,就可以实现行为和表现(js和html)的分离。
*******************************引用一段文字说明 问题所在*******************************
ASP.Net 提供了代码和页面分离的机制,在大多数情况下,这种机制工作得非常好。但是,如果需要使用客户端java脚本来做些工作,你就会遇到麻烦了。问题出在你在设计阶段为server端控件设置的ID值和页面运行时控件实际的ID值不一致。例如,新建一个Web site,增加一个 aspx page,在页面上加入一个text box控件:
<asp:TextBox ID="mytext" Runat=server></asp:TextBox>
运行这个页面,从View source中会看到运行时的结果:
<Input name="mytext" type="text" id="mytext" />
这时我们看到设计阶段的ID值和运行时控件的ID值是一样的,没有问题,这是因为这是一个单纯的aspx页面。如果在页面中包含一个用户自定义的web control或使用了master pages (ASP.NET 2.0),情况就不乐观了。我们增加一个新的user control名为mycontrol.ascx. 在mycontrol.ascx中加入同样的text box。再把这个自定义控件加入到一个aspx 页面, 将此控件的ID设置为myControl. 在浏览器中运行这个页面,得到的html是这样的:
<Input name="myControl:mytext" type="text" id="myControl_mytext" />
text box控件的设计阶段ID= mytext,但运行时得到的ID=myControl_mytext。也就是在原来的ID前面增加了包含text box控件的容器myControl的ID。在使用master pages时,所有的aspx 页面都是被包含在一个容器中的, 而且还常常会有容器的嵌套。如果在客户端使用JavaScript去按照ID查找控件就会失败
*******************************************************************************************
通常这个时候,就要利用控件的ClientID属性来获得运行时ID:
1.在Masterpage的header部分加入对外部js文件的参考,那么所有应用此模板的页面都可以应用这个js文件
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<script src ="JScript.js" language ="javascript" type ="text/javascript" ></script>
2.JS文件定义:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
function showTip(id,oevent,address)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var div=document.getElementById(id);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var result=DbOp.getDetail(address).value;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var arrs=result.split(",");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var show="The ID IS :"+arrs[0]+"<br>"+"The name IS :"+arrs[1];
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
div.innerHTML=show;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
div.style.visibility="visible";
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
div.style.left=oevent.clientX+5;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
div.style.top=oevent.clientY+5;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
function hidTip(id,oevent)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var div=document.getElementById(id);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
div.style.visibility="hidden";
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
3。子页面:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div id="divshow" runat ="server" >
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div id="div2" runat ="server" style =" border :solid 1px red; background :#f0f0f0; visibility :hidden ; position :absolute">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
xxxxx
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</asp:Content>
4.CS:
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
//some code...
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
gv.Rows[i].Cells[2].Attributes.Add("onMouseover", "showTip('"+div2.ClientID+"',event,'" + address + "')");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
gv.Rows[i].Cells[2].Attributes.Add("onMouseout", "hidTip('"+div2.ClientID+"',event)");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
//code here ...
结合上篇文章,就可以实现行为和表现(js和html)的分离。
相关文章推荐
- 优化网站设计(八):将脚本文件和样式表作为外部文件引用
- JavaScript中引用外部CSS文件
- javascript中JS文件的引用需要注意几点
- 动态引用外部的Javascript脚本文件
- Sharepoint学习笔记—Ribbon系列-- 9.如何让用户定义的Ribbon引用外部Javascript文件
- 外部引用JavaScript文件乱码问题
- 引用js外部文件注意的一个问题
- SharePoint【Ribbon系列】-- 09.如何让用户定义的Ribbon引用外部Javascript文件
- javascript (六) 引用外部js文件
- 优化网站设计(八):将脚本文件和样式表作为外部文件引用
- 优化网站设计(八):将脚本文件和样式表作为外部文件引用
- 指定外部Behavior文件作为javaScript的来源
- JavaScript基础(三)- 独立引用JS外部文件
- JavaScript基础之引用外部JS文件
- 有用的javascript外部文件或其他外部文件引用
- javascript的引用外部js文件时浏览器的执行顺序
- 有用的javascript外部文件或其他外部文件引用
- 动态引用外部的Javascript脚本文件
- Js_引用外部JavaScript文件
- 母版页引用外部文件的路径问题,如加载javascript文件时