您的位置：首页 > Web前端 > JavaScript

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

2011-03-31 17:36 141 查看
一个母版页中引用了一个js文件和一个css样式表文件，路径是使用的相对路径，代码是这样子的

viewsourceprint?

1
<linkhref=
"../css/dtree.css"
rel=
"stylesheet"
type=
"text/css"
/>
2
3
<scriptsrc=
"../js/dtree.js"
type=
"text/javascript"
></script>
viewsourceprint?

1
母版页我放在项目文件MasterPage文件夹中，脚本文件和css文件我分别放在相应的文件夹中，在Design模式中这也是可见的，然后我加入内容页，内容页假设我放在网站根目录下面，然后放入内容，进入后台进行编程，基本上完成以后想看看效果，就F5进行了调试，不过缺发现js没有起作用，在IE下查看源文件，发现引用处的css和js的路径发生了变化，如下所示
viewsourceprint?

1
<linkhref=
"css/dtree.css"
rel=
"stylesheet"
type=
"text/css"
/>
2
3
<scriptsrc=
"../js/dtree.js"
type=
"text/javascript"
></script>
viewsourceprint?

1
从这里可以看到，内容页中的引用的css文件的路径在页面加载运行后发生了变化，而js的路径没有相应的发生变化。这样就造成了内容页中并不能正确的引用到js文件的路径，从而造成了错误。
viewsourceprint?

1
其实这样的问题并不仅仅限于js,比如页面中的HTML基本元素，在内容页加载的时候也会因为相对路径的路径问题而产生这样那样的问题。到<Ahref=
"/article/4790215.html"
target=_blank>这里</A>可以查看稍微详细一点的信息。
viewsourceprint?

1
对于这种问题，比较好的解决方案就是写成这样的形式
viewsourceprint?

1
<scriptsrc=
'<%=ResolveUrl("~/js/jquery.js")%>'
type=
"text/javascript"
></script>
ResolveUrl方法会把服务器端的地址进行解析，转换之后的地址是诸如/Project/Folder/File.jpg这样的绝对路径，转换之后就不用担心母版页带来的路径问题了。

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

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航