ie6,7 location.href 没有权限的出现原因及解决方案
QA 给我提了个bug,说是页面在ie7下点击切换语言报了个js错误。于是在办公网配上开发机host便用ie8的ie7模式看了下,一切正常,到qa同事机器看了下,确 实报js错误。。。看来只有纯ie7才会有这个问题。回到座位开启虚拟机,用ie7试了下首页,果然可以重现, permission declined。以下是切换语言代码:
if (lang && lang !== __Config.current_lang && lists[lang]){
var reg_lang = /(&|\?)(lang=)[^&]*(&|$)/g;
location.href = (location.href.replace(reg_lang, '$1').replace(/#.*$/,'') + '&lang=' + lang).replace(/&+/g, '&').replace(/\/&/,'/?');
}
var reg_lang = /(&|\?)(lang=)[^&]*(&|$)/g;
location.href = (location.href.replace(reg_lang, '$1').replace(/#.*$/,'') + '&lang=' + lang).replace(/&+/g, '&').replace(/\/&/,'/?');
}
看了下唯一可能出问题的就是location.href这里,去掉location.href = (location.href.replace(reg_lang, '$1').replace(/#.*$/,'') + '&lang=' + lang).replace(/&+/g, '&').replace(/\/&/,'/?');果然没有报错了。这就奇怪了,首页就在顶级域名xx.com下,没有任何跨域的可能。于是新建了一个测试页面把代码贴进去,一切正常。。。那究竟是哪里出问题呢,回头继续看代码,首页为了增加feedback,弄了个iframe把feedback.xx.com下一个页面加载进来,而该页面在提交feedback成功后会调用父页面的关闭弹出层方法,由于跨域原因父页面与该子页面都加入了document.domain='xx.com'这句,而这句正是与测试页面不同的地方,于是乎在首页试着把document.domain='xx.com'去掉,语言切换正常了,但feedbak子页面提交后弹出层不能关闭了,由于跨域。猜想在测试页面加上document.domain='xx.com'应该也会报没权限吧,试了下结果竟然还是正常。。。还有什么不同???难道是jquery?测试页面没有引入,抱着试试看的态度把jquery 1.71加进去,wow,测试页面终于报错了。坑爹啊,jquery究竟做了什么?网上找了几乎没啥资料,总不能让我把jquery从首页去掉吧,实在没有头绪,这个切换语言必须要获取当前页面url才能做。接着再试,发现在主页设置documen.domain之前是可以获取到location.href的,这样看起来还不错,那在设置domain后不能读,是否可以设置呢?试了下ok,这样的话不完美解决方案产生了,在设置domain前先用个变量存储当前页面url,在设置的时候直接用,这样可以避开ie 7 location.href的读取权限问题。
想了下如果页面的hash变了,而hash的改变并不会刷新页面,这样我之前获取的url就不准确了,肿么办?不知道,郁闷中抄起一根精白沙走到了吸烟区,点上,慢慢踱步,是不是还有其他方法获取当前页面url呢?突然灵光一现,document.URL是不是可以呢?狠狠的掐灭烟头,奔回座位在测试页面试了下没报脚本错误,顺利取到了当前页面url。
总结如下:
在ie6,7页面下如果设置domain如与当前域相同,且引入了jquery(我试了1.4.2, 1.7.1, 1.8.1)取location.href会报没有权限的错误。
解决方案:
用documen.URL代替(document.URL 取值时等价于 window.location.href 或 document.location.href。在某些浏览器中通过对 document.URL 赋值来实现页面跳转,但某些浏览器中不行)。
最后附上几段测试代码,测试环境虚拟机中,ie6,7
成功,设置domain,引入jquery,用document.URL,用document.URL在下面几种情况都ok;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input id="test" type="button" value="test" onclick="test()" />
<script src="http://www.xx.com/wechat_portal/js/jquery.js"></script>
<script>
document.domain = "xx.com";
function test() {
document.getElementById('test').value = document.URL;
}
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input id="test" type="button" value="test" onclick="test()" />
<script src="http://www.xx.com/wechat_portal/js/jquery.js"></script>
<script>
document.domain = "xx.com";
function test() {
document.getElementById('test').value = document.URL;
}
</script>
</body>
</html>
失败, 设置domain,引入jquery,用location.href;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input id="test" type="button" value="test" onclick="test()" />
<script src="http://www.xx.com/wechat_portal/js/jquery.js"></script>
<script>
document.domain = "xx.com";
function test() {
document.getElementById('test').value = location.href;
}
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input id="test" type="button" value="test" onclick="test()" />
<script src="http://www.xx.com/wechat_portal/js/jquery.js"></script>
<script>
document.domain = "xx.com";
function test() {
document.getElementById('test').value = location.href;
}
</script>
</body>
</html>
成功,设置domain,不引入jquery,用location.href;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input id="test" type="button" value="test" onclick="test()" />
<script>
document.domain = "xx.com";
function test() {
document.getElementById('test').value = location.href;
}
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input id="test" type="button" value="test" onclick="test()" />
<script>
document.domain = "xx.com";
function test() {
document.getElementById('test').value = location.href;
}
</script>
</body>
</html>
成功,不设置domain,引入jquery,用location.href;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input id="test" type="button" value="test" onclick="test()" />
<script src="http://www.xx.com/js/jquery.js"></script>
<script>
function test() {
document.getElementById('test').value = location.href;
}
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input id="test" type="button" value="test" onclick="test()" />
<script src="http://www.xx.com/js/jquery.js"></script>
<script>
function test() {
document.getElementById('test').value = location.href;
}
</script>
</body>
</html>