博客园  :: 首页  :: 联系 :: 管理

母版页 javascript 文件的相对路径问题

Posted on 2009-11-06 12:53  sunrack  阅读(1193)  评论(0编辑  收藏  举报

一个经常让开发人员疑惑的问题是母版页是如何处理相对路径的。如果你使用的是静态文字,这一问题不会困扰你。不过,如果你加入了<img>标签或者指向其他资源的HTML标签,问题就可能发生。

当你把母版页和内容页放在不同的目录时,问题就发生了。把母版页和内容页分放到不同的目录,这是大型网站推荐使用的最佳实践。实际上,微软建议你在专门的文件夹里保存所有的母版页。不过,如果你不够小心,使用相对路径时会带来问题。

例如,假设你把母版页放在一个叫做MasterPages的子文件夹里,并在母版页里加入了如下的<img>标签:

假设文件\MasterPages\banner.jpg存在,这看起来是行得通的。甚至在Visual Studio设计环境会出现图片。但是,如果你在另一个子文件夹里创建了一个内容页,路径就会被解释成相对于那个文件夹。如果文件在那里不存在,就会得到 一个破损的链接而看不到图片。更糟的是,如果有一幅具有相同文件名的另外一个图片,你会不经意地得到一幅错误的图片。

这样的问题之所以会发生,是因为<img>标签是普通的HTML。所以,ASP.NET不会接触到它。遗憾的是,当ASP.NET创建 内容页的时候,这个标签就不合适了。相同的问题出现在向其他页面提供相对链接的<a>标签以及用来把母版页链接到样式表 的<link>元素。

要解决这一问题,你可以预先把URL写成相对于内容页面的地址。不过这会带来混淆,限制母版页使用的范围,并且产生在设计环境里不正确显示母版页的负面效应。

另一个快捷的解决方案是把图片标签变成服务器端控件,这样ASP.NET就会修复这个错误:

这个解决办法会起作用是因为ASP.NET根据这一信息创建一个HtmlImage服务器控件。这个对象在母版页的Page对象实例化后创建,此时,ASP.NET把所有路径解释为相对于母版页的位置。你可以使用同样的技术来修复<a>标签对其他页面的链接。

你还可以使用根路径语法,并用"~"字符作为URL的开头。例如,下面这个<img>标签毫无歧义地指向网站的MasterPages文件夹中的banner.jpg文件。

遗憾的是,这种语法只对服务器端控件有效。如果你要对普通的HTML产生同样的效果,你需要在链接里包含域名的完整的相对路径。这样的HTML代码难看且不可移植,所以不推荐使用。

 

 

最终方案

<script src="js/jquery.js" type="text/javascript" runat="server"></script>

运行时出错,说是jquery.js中的第12行的$符号不知道是什么意思,把runat="server"去掉后又成功,看来是不能加runat="server"这个属性

解决方法:

<script src='<%=ResolveUrl("~/js/jquery.js") %>' type="text/javascript"></script>