zoukankan      html  css  js  c++  java
  • 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(/\/&/,'/?');  
        }   
           看了下唯一可能出问题的就是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> 


    失败, 设置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> 
    成功,设置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>
     

    成功,不设置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> 
  • 相关阅读:
    配置Gitlab pages和Gitlab CI
    程序员不应该错过的 6大导航
    Ice简介+Qt代码示例
    Android开发者的Anko使用指南(四)之Layouts
    三种方式绘制图片
    产品-(前后端)开发-测试的见解
    01_Docker概念简介、组件介绍、使用场景和命名空间
    Docker 创建 Confluence6.12.2 中文版
    读再多懂再多的鸡汤,不如每天敲码思考总结
    Postman Mock Server
  • 原文地址:https://www.cnblogs.com/WuQiang/p/2697474.html
Copyright © 2011-2022 走看看