需求:
获取用户输入的字符串,跳转到外链:国家科技图书文献中心,进一步检索。
问题:
你可以点击上述链接,检索条件变成了乱码。为啥?因为该外链的后端对检索字进行了 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]);
网友评论