现在的位置: 首页 > 综合 > 正文

母版页的JS,图片路径问题

2012年12月23日 ⁄ 综合 ⁄ 共 2047字 ⁄ 字号 评论关闭
一个母版页中引用了一个js文件和一个css样式表文件,路径是使用的相对路径,代码是这样子的

1 <link href="../css/dtree.css" rel="stylesheet" type="text/css" />
2   
3 <script src="../js/dtree.js" type="text/javascript"></script>
1 母版页我放在项目文件MasterPage文件夹中,脚本文件和css文件我分别放在相应的文件夹中,在Design模式中这也是可见的,然后我加入内容页,内容页假设我放在网站根目录下面,然后放入内容,进入后台进行编程,基本上完成以后想看看效果,就F5进行了调试,不过缺发现js没有起作用,在IE下查看源文件,发现引用处的css和js的路径发生了变化,如下所示
1 <link href="css/dtree.css" rel="stylesheet" type="text/css" />
2   
3 <script src="../js/dtree.js" type="text/javascript"></script>
1 从这里可以看到,内容页中的引用的css文件的路径在页面加载运行后发生了变化,而js的路径没有相应的发生变化。这样就造成了内容页中并不能正确的引用到js文件的路径,从而造成了错误。
1 其实这样的问题并不仅仅限于js,比如页面中的HTML基本元素,在内容页加载的时候也会因为相对路径的路径问题而产生这样那样的问题。到<A href="http://www.cnblogs.com/sunrack/archive/2009/11/06/1597337.html" target=_blank>这里</A>可以查看稍微详细一点的信息。
1 对于这种问题,比较好的解决方案就是写成这样的形式
1 <script src='<%=ResolveUrl("~/js/jquery.js") %>' type="text/javascript"></script>

ResolveUrl方法会把服务器端的地址进行解析,转换之后的地址是诸如/Project/Folder/File.jpg 这样的绝对路径,转换之后就不用担心母版页带来的路径问题了。

 

 

 

1. 图片问题
非常好解决
<img runat="server" src="~/images/ad468x60.gif" alt="" />
加上runat="server" ,路径使用绝对路径~/基本上就OK了。
2. CSS文件引用
<link rel="stylesheet" type="text/css" href="style.css" />
这里神奇的就是link的文件的href是随着被访问文件的目录结构自动调整,说白了就考虑母版页引用的路径就可以了,其他不用费心。
比如在母版页同目录下的一个文件夹内的一个xxx.aspx引用的母版页,那么上面的语句在客户端就自动变为
<link rel="stylesheet" type="text/css" href="../style.css" />
前提就是<head runat="server"></head>必须有runat="server"
 3.  JS文件的引用
<script type="text/javascript" src="menu/jquery.min.js"></script>
这样的话在其他目录下的页面文件,客户端肯定就引用不到了
那么你需要这样处理
<script type="text/javascript" src='<%=ResolveUrl("menu/jquery.min.js")%>'></script>
<script type="text/javascript" src='<%=ResolveClientUrl("menu/ddsmoothmenu.js")%>'></script>
这是2种方式,在客户端的路径当然也会不一样,分别是:
<script type="text/javascript" src='/TLERP/menu/jquery.min.js'></script>
<script type="text/javascript" src='../menu/ddsmoothmenu.js'></script>
那么很明显ResolveClientUrl是相对路径,是比较好用的,当然ResolveUrl也有很多地方需要这样的绝对路径,其中TLERP是web应用的名字。
另外,如果你将这样的代码放在了<head>里面,将会报错:
控件包含代码块(即 <% ... %>),因此无法修改控件集合。
原因我不说了,你将引用的东西放在<body>里即可,哪怕是<body>和<form>之间。

抱歉!评论已关闭.