javaScript作为外部文件引用时要注意
单页面应用js没有问题,但是假如应用masterpage,在套用外部js文件时,依据设置的id得到的对象一直为NULL:
ASP.Net 提供了代码和页面别离的机制,在大多数状况下,这种机制工作得十分好。但是,假如需求运用客户端java脚原本做些工作,你就会遇到费事了。问题出在你在设计阶段为server端控件设置的ID值和页面运转时控件实践的ID值不分歧。例如,新建一个Web site,增加一个 aspx page,在页面上参加一个text box控件:
运转这个页面,从View source中会看到运转时的结果:
这时我们看到设计阶段的ID值和运转时控件的ID值是一样的,没有问题,这是由于这是一个单纯的aspx页面。假如在页面中包含一个用户自定义的web control或运用了master pages (ASP.NET 2.0),状况就不悲观了。我们增加一个新的user control名为mycontrol.ascx. 在mycontrol.ascx中参加同样的text box。再把这个自定义控件参加到一个aspx 页面, 将此控件的ID设置为myControl. 在阅读器中运转这个页面,得到的html是这样的:
text box控件的设计阶段ID= mytext,但运转时得到的ID=myControl_mytext。也就是在原来的ID前面增加了包含text box控件的容器myControl的ID。在运用master pages时,一切的aspx 页面都是被包含在一个容器中的, 而且还常常会有容器的嵌套。假如在客户端运用JavaScript去依照ID查找控件就会失败
*
通常这个时分,就要应用控件的ClientID属性来取得运转时ID:
1.在Masterpage的header局部参加对外部js文件的参考,那么一切应用此模板的页面都能够应用这个js文件
< script src ="https://www.it610.com/article/JScript.js" language ="javascript" type ="text/javascript" > script >
2.JS文件定义:
functionshowTip(id,oevent,address)
{
var div=document.getElementById(id);
var result=DbOp.getDetail(address).value;
var arrs=result.split(",");
var show="The ID IS :"+arrs[0]+"
"+"The name IS :"+arrs[1];
div.innerHTML=show;
div.style.visibility="visible";
div.style.left=oevent.clientX+5;
div.style.top=oevent.clientY+5;
}
functionhidTip(id,oevent)
{
var div=document.getElementById(id);
div.style.visibility="hidden";
}
3。子页面:
< asp:Content ID ="Content2" ContentPlaceHolderID ="ContentPlaceHolder1" Runat ="Server" >
< div >
< divid ="divshow"runat="server">
div >
< divid ="div2"runat="server"style=" border :solid 1px red;
background :#f0f0f0;
visibility :hidden ;
position :absolute" >
xxxxx
div >
div >
asp:Content >
4.CS:
// some code...
gv.Rows[i].Cells[ 2 ].Attributes.Add( " onMouseover " , " showTip(' " + div2.ClientID + " ',event,' " + address + " ') " );
gv.Rows[i].Cells[ 2 ].Attributes.Add( " onMouseout " ," hidTip(' " + div2.ClientID + " ',event) " );
【javaScript作为外部文件引用时要注意】// code here ...
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换