解决IE8 Base标签不支持相对路径问题及使用绝对路径在使用了反向代理的项目中获取的路径错误问题
众所周知,IE8以下版本是不支持 Base标签里写相对路径的,比如这样写:
<base href="myapp/">
在IE10以上版本、Firefox、Chrome中都能正常识别 但在IE8中,无法识别此标签,导致很多涉及路径的地方出错
当然,你可以写绝对路径解决这个问题,比如这样写(按Java举例):
<base href="<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/" %>">
这样写IE8可以正常识别
但是,如果你的项目使用了反向代理的话(用户不会直接访问你的项目地址,而是访问反向代理服务器,由反向代理服务器转发请求访问你的项目) 用上面的方法获取到的绝对路径就错了,request.getServerName() 和 request.getServerPort()获取到的是你项目服务器的地址和端口号 而用户不能直接访问你的项目服务器,导致页面引用出错,无法正常显示
为了解决这个问题,我想到一个办法,使用JS补全相对路径前面的服务器地址和端口号,让相对路径变成“绝对路径” 代码如下:
<script type="text/javascript">
document.write("<base href=\""+window.location.protocol+"//"+window.location.host+"/myapp/");
</script>
因为window.location.host 获取到的是用户浏览器地址栏里的IP或域名及端口号 如果使用了反向代理,这里获取的是反向代理服务器的IP或域名及端口,而不会获取到你的项目的真实IP及端口 这样就巧妙的解决了使用绝对路径反向代理问题及相对路径不支持IE8问题
继续深入: 经过测试,上面写法在IE8以上版本、FireFox、Chrome中均能正常显示页面 但是,使用Firefox或Chrome,打开调试工具,启用网络监控,会发现浏览器还是请求了一些错误路径,返回了404,但不会体现到页面上,页面显示正常 这是因为Firefox或Chrome在上面js还未执行前,已经去访问页面引用的js及css了,但由于Base标签还未创建,浏览器就错误的去尝试访问应用的js及css,后台就看到了一些404请求 解决方法: 写两个Base标签,如下:
<base href="myapp/">
<script type="text/javascript">
document.write("<base href=\""+window.location.protocol+"//"+window.location.host+"/myapp/");
</script>
经过测试,上面写法兼容IE8以上版本、FireFox、Chrome,此问题完美解决。
浙公网安备 33010602011771号