esh*_*lev 17 html javascript path
我有一个javascript模块,它创建一个带有关闭按钮("X")图片的div.这个div和javascript放在我网站上的很多地方.
相对路径解决方案:当页面包含javascript时,javascript使用图像的相对路径.Rhe相对路径是相对于html页面的.如果不同路径中的HTML页面使用此javascript,我将需要2个不同的图像.
绝对路径解决方案:我不知道我的团队成员用于开发的服务器(我确信他不在我的服务器上开发).这意味着绝对路径不起作用.
有一种克服这个问题的简单方法吗？就像让脚本以某种方式意识到它的路径一样？
BGe*_*sen 13
可变路径(测试/暂存/生产域)在javascript中始终是一个问题,最好的选择是在HTML中包含应用程序/网站的根路径.显而易见的地方是你的模板层.例如:
<body data-root="${rootContext}">
<!-- or whatever syntax your template layer uses -->
并使用javascript抓取它以便在脚本中使用.
var rootContext = document.body.getAttribute("data-root");
注意,你只能在DOM准备就绪时(或者当document.body可用时,跨浏览器不同);)
另一种选择,在我看来,不太常见的选择是简单地渲染javascript.
<script>
var rootContext = ${rootContext} // or whatever syntax your template layer uses.
</script>
至少使用'data-root'技术,您可以将值存储在任何位置,并避免使用全局定义.
因此,在您引用图像的代码中,您可以执行以下操作:
img.src = rootContext + "/media/js/close.gif";
或者创建一个很好的帮助方法:
// lets use a namespace to avoid globals.
var myApp = {
// still need to set this when DOM/body is ready
rootContext: document.body.getAttribute("data-root"),
getContext: function( src ) {
return this.rootContext + src;
}
}
img.src = myApp.getContext( "/media/js/close.gif" );
在辅助方法中,您还可以编写一些代码以确保正确使用/和诸如此类的东西.
在 html 中可以通过三种方式指定图像的路径：
<img src="kitten.png"/><img src="/images/kitten.png"><img src="http://www.foo.com/images/kitten.png">第二种方法可能适合你。