前言
在开发项目的时候遇到的一个比较坑的问题，产品要求从浏览器拿到浏览器地址栏里面的搜索词进行判断，我们一般使用的都是UTF-8的编码格式，但是百度和谷歌在对搜索词编码的时候都是使用的GBK编码，这就导致，解码失败，于是就在网上找解决方法，最终找到了一位前辈整理出来的方法，通过iframe解决了这个问题，所以特此总结一下，方便自己以后使用，也希望能帮助到更多的人，最后会放上前端文章的链接。
1、编码(支持GBK和GB2312)
为了避免麻烦，我们可以将表单的请求页面设定为当前页面，将回调函数放在页面JS的最前面，这样当此页面存在父页面并且__encode__iframe__callback__定义了，就可以直接执行回调，并关闭窗口：
1 | if (parent.__encode__iframe__callback__) { // 判断当前页面是否为子窗口 parent.__encode__iframe__callback__(location.search.split(\'=\')[1]); //直接关闭当前子窗口 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[1] !== undefined ? arguments[1] : \'gbk\'; return new Promise(function (resolve, reject) { try { _encode(str, charset, function (data) { resolve(data); }); } catch (e) { resolve(\'字符编码错误.\', e.toString()); } });}; |
二、解码（支持GBK、GB2312、Base64）
1 | 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[1] !== undefined ? arguments[1] : \'gbk\'; return new Promise(function (resolve, reject) { try { _decode(str, charset, function (data) { resolve(data); }); } catch (e) { resolve(\'字符解码错误.\', e.toString()); } });}; |
参考链接：https://zhuanlan.zhihu.com/p/35537480
到此这篇关于前端实现字符串GBK与GB2312的编解码(小结)的文章就介绍到这了,更多相关字符串GBK与GB2312的编解码内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
本知识来源于互联网索引，如有侵权请联系我们！
嗨，这是一条评论。 要开始审核、编辑及删除评论，请访问仪表盘的“评论”页面。 评论者头像来自Gravatar。