IE5迁移到IE11过程中遇到的一些问题

2024-02-28 20:08:04

IE5迁移到IE11过程中遇到的一些问题

document.getElementById("idName")

IE11中严格区分idName的大小写,IE5不区分大小写,如果你在适配过程中遇到浏览器控制台报null错误, 就应该检查报错行是否idName大小写错误
获取frame的写法变化
- IE5写法: document.frames("frameName")
- IE11写法:document.frames["frameName"]

使用xhr(XMLHttpRequest)时, url不会自动将特殊字符转义,而是在特殊字符处截断, 需手动转义, 测试代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test xhr</title>
</head>
<body>

<p>点击按钮执行 <em>test()</em> 函数.</p>
<button onclick="test()">点这里</button>

<script>
    function test() {
        var xhr;
        if (window.ActiveXObject) {
            alert("正在使用旧版本的Internet Explorer（IE5和IE6）")
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            xhr = new XMLHttpRequest();
        }
        var url = "http://localhost:8080/awesome/clientIp?param1=#test#";
        // 在ie5中发现: 实际执行的url已被转义为:http://localhost:8080/awesome/clientIp?param1=%23test%23
        // 在ie11和chrome中发现: 实际执行的url已被截断为:http://localhost:8080/awesome/clientIp?param1=
        xhr.open('GET', url, false);
        xhr.send(null);
    }
</script>

</body>
</html>

IE11中微软弃用了zh_CN语言，而采用 zh_hans_CN，造成前台页面不能正常国际化, 后端可增加国际化过滤器解决此问题

后端测试接口代码

    // curl -v localhost:8080/awesome/locale
    // ie打开:http://localhost:8080/awesome/locale ,请求头:Accept-Language: zh-Hans-CN, zh-Hans; q=0.5 ,后端打印 zh_CN_#Hans
    // chrome打开: http://localhost:8080/awesome/locale ,请求头: Accept-Language: zh-CN,zh;q=0.9 ,后端打印 zh_CN
    @GetMapping("/locale")
    public Locale locale(HttpServletRequest httpServletRequest) {
        Locale locale = httpServletRequest.getLocale();
        logger.info("/locale , locale is:{}", locale);
        return locale;
    }

国际化过滤器代码

package com.varyuan.awesome.filter;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletRequestWrapper;
import java.io.IOException;
import java.util.Locale;

// 国际化过滤器
// 适配情况:ie11中弃用了zh_CN请求头，而采用zh-Hans-CN
@Component
public class I18nFilter implements Filter {

    private final String zh = Locale.CHINA.getLanguage();
    private final String CN = Locale.CHINA.getCountry();

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequestWrapper zhCnWrapper = new HttpServletRequestWrapper((HttpServletRequest) servletRequest) {
            @Override
            public Locale getLocale() {
                Locale loc = super.getLocale();
                String language = loc.getLanguage();
                String country = loc.getCountry();
                if ((zh.equals(language) && CN.equals(country))) {
                    return Locale.CHINA;
                } else {
                    return loc;
                }
            }
        };
        filterChain.doFilter(zhCnWrapper, servletResponse);
    }
}

码农公寓

相关文章