关于javascript和css的宿主环境以及资源引用相对路径等问题实践总结!

25 May 2011 in Web前端 on web css javascript - Hits()

1.javascript引用资源(比如图片)相对路径是以宿主环境(所被引用的网页比如user.html)所处位置为基准

2.css引用资源(比如图片)相对路径是以.css文件所处位置为基准!

已经实践证明过!

--2009aicheaizi
------images
---------index_02.jpg
------test.htm

--css
------css
----------test.css

--js
------js
----------test.js

引用代码如下:
test.css

#imgtest 
{ 
background-image:url(。。/。。/2009aicheaizi/images/index_02.jpg);//把.换成。以防cnblogs转换 
width:500px; 
height:50px; 
border:solid 1px red; 
}

test.js

function writeimg() 
{ 
  document.write("<img src='images/index_02.jpg' />"); 
}

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>无标题页</title> 
<script type="text/javascript" src="../js/js/test.js"></script> 
  <link href="../css/css/test.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<script type="text/javascript"> 
writeimg(); 
</script> 
<div id="imgtest"></div> 
</body> 
</html>

实践是检验真理的唯一途径.

另外//d1.abc.com/test.js 这种用法没试过吧，这也是绝对路径，但是没有写前面的http协议头，这样写有什么好处呢，对于需要引用外部脚本的站点来说，如果是https请求，那么上面的地址会请求https://d1.abc.com/test.js 如果是http请求,上面地址则会请求http://d1.abc.com/test.js 这样就避免了跨域安全问题，参见:http://blog.ureshika.com/archives/402.html