美文网首页
实现各种编码的urlencode

实现各种编码的urlencode

作者: Crisyhuang | 来源:发表于2018-07-20 16:39 被阅读0次
    需求:

    获取用户输入的字符串,跳转到外链:国家科技图书文献中心,进一步检索。

    问题:

    你可以点击上述链接,检索条件变成了乱码。为啥?因为该外链的后端对检索字进行了 GBK 编码,所以我们传过去的字符串也应该先进行相同字符集的编码。但是 JavaScript 本身没有特性支持 gbk 的 urlencode,该怎么解决?

    解决思路:

    关键:利用 form 的 accept-charset 属性,它规定服务器处理表单数据所接受的字符集。
    1、创建一个 form,在表单中设置属性 acceptCharset 为 'gbk',用于对字符串进行 gbk 编码;
    2、创建一个 iframe,form 的 target 指向该 iframe,用于表单无刷新提交;
    3、新建一个 list.html,form action 指向它,用于接收已编码的字符串,执行回调函数进行外链跳转。

    代码示例:
    // 实现任意字符集的编码
    urlencode: function(str, charset, callback){
        //创建form通过accept-charset做encode
        var form = document.createElement('form');
        form.method = 'get';
        form.style.display = 'none';
        form.acceptCharset = charset;
        if (document.all) {
            //如果是IE那么就调用document.charset方法
            window.oldCharset = document.charset;
            document.charset = charset;
        }
    
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'str';
        input.value = str;
    
        form.appendChild(input);
        form.target = '_urlEncode_iframe_';
        document.body.appendChild(form);
    
        //隐藏iframe截获提交的字符串
        if (!window['_urlEncode_iframe_']) {
            var iframe;
            if(document.all){
                try{
                    iframe = document.createElement('<iframe name="_urlEncode_iframe_"></iframe>');
                }catch(e){
                    iframe = document.createElement('iframe');
                    iframe.setAttribute('name', '_urlEncode_iframe_');
                }
            }else{
                iframe = document.createElement('iframe');
                iframe.setAttribute('name', '_urlEncode_iframe_');
            }
    
            iframe.style.display = 'none';
            iframe.width = "0";
            iframe.height = "0";
            iframe.scrolling = "no";
            iframe.allowtransparency = "true";
            iframe.frameborder = "0";
            iframe.src = 'about:blank';
            document.body.appendChild(iframe);
        }
    
        window._urlEncode_iframe_callback = function(str) {
            callback(str);
            if (document.all) {
                document.charset = window.oldCharset;
            }
        };
    
        //设置回调编码页面的地址,这里需要自行修改
        form.action = 'list_1.html';
        form.submit();
    
        setTimeout(function() {
            form.parentNode.removeChild(form);
            iframe.parentNode.removeChild(iframe);
        }, 500)
    }
    
    // list_1.html
    parent._urlEncode_iframe_callback && parent._urlEncode_iframe_callback(location.search.split('=')[1]);
    

    相关文章

      网友评论

          本文标题:实现各种编码的urlencode

          本文链接:https://www.haomeiwen.com/subject/lilqmftx.html