前端实现字符串GBK与GB2312的编解码(小结)
<p><span style="color: #ff0000"><strong>前言<br /></strong></span></p>
<p>在开发项目的时候遇到的一个比较坑的问题，产品要求从浏览器拿到浏览器地址栏里面的搜索词进行判断，我们一般使用的都是UTF-8的编码格式，但是百度和谷歌在对搜索词编码的时候都是使用的GBK编码，这就导致，解码失败，于是就在网上找解决方法，最终找到了一位前辈整理出来的方法，通过iframe解决了这个问题，所以特此总结一下，方便自己以后使用，也希望能帮助到更多的人，最后会放上前端文章的链接。</p>
<p><span style="color: #ff0000"><strong>1、编码(支持GBK和GB2312)</strong></span></p>
<p>为了避免麻烦，我们可以将表单的请求页面设定为当前页面，将回调函数放在页面JS的最前面，这样当此页面存在父页面并且__encode__iframe__callback__定义了，就可以直接执行回调，并关闭窗口：</p>
<div class="jb51code">
<pre class="brush:js;">
if (parent.__encode__iframe__callback__) { // 判断当前页面是否为子窗口
parent.__encode__iframe__callback__(location.search.split('='));
//直接关闭当前子窗口
window.close();
}
function GBKEncode(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 = '__encode__iframe__'; // 指定提交的目标的iframe
document.body.appendChild(form);
//隐藏iframe截获提交的字符串
if (!window['__encode__iframe__']) {
var iframe;
iframe = document.createElement('iframe');
iframe.setAttribute('name', '__encode__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.__encode__iframe__callback__ = function (str) {
callback(str);
if (document.all) {
document.charset = window.oldCharset;
}
}
//设置回调编码页面的地址，这里需要用户修改
form.action = window.location.href;
form.submit();
setTimeout(function () {
form.parentNode.removeChild(form);
iframe.parentNode.removeChild(iframe);
}, 1000) // 0.5秒后移除节点
}
GBKEncode('需要编码的字符', 'gb2312', callback);// 测试
// promise封装
var encode = function encode(str) {
var charset = arguments.length > 1 && arguments !== undefined ? arguments : 'gbk';
return new Promise(function (resolve, reject) {
try {
_encode(str, charset, function (data) {
resolve(data);
});
} catch (e) {
resolve('字符编码错误.', e.toString());
}
});
};
</pre>
</div>
<p><span style="color: #ff0000"><strong>二、解码（支持GBK、GB2312、Base64）</strong></span></p>
<div class="jb51code">
<pre class="brush:js;">
function randomId() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}return text;
}
function _decode(str, charset, callback) {
var script = document.createElement('script');
var id = randomId(); // 生成唯一ID，防止冲突
script.id = '_urlDecodeFn_' + id;
window['_urlDecodeFn_' + id] = callback;
var src = 'data:text/javascript;charset=' + charset + (',_urlDecodeFn_' + id + '("') + str + '");';
src += 'document.getElementById("_urlDecodeFn_' + id + '").parentNode.removeChild(document.getElementById("_urlDecodeFn_' + id + '"));';
script.src = src;
document.body.appendChild(script);
}
_decode('需要解码的字符', 'gb2312', callback) // 测试
// promise封装
var decode = function decode(str) {
var charset = arguments.length > 1 && arguments !== undefined ? arguments : 'gbk';
return new Promise(function (resolve, reject) {
try {
_decode(str, charset, function (data) {
resolve(data);
});
} catch (e) {
resolve('字符解码错误.', e.toString());
}
});
};
</pre>
</div>
<p>参考链接：<a rel="external nofollow" target="_blank" href="https://zhuanlan.zhihu.com/p/35537480">https://zhuanlan.zhihu.com/p/35537480</a></p>
頁:
[1]