前言

在项目开发中，有时会遇到一些看似简单却颇为棘手的细节问题。比如这次，产品需求是从浏览器地址栏准确获取用户的搜索关键词。听起来很基础对不对？但坑就埋在这里：我们项目通常使用UTF-8编码，而主流搜索引擎如百度和谷歌，在对搜索词进行编码时，默认采用的却是GBK或GB2312编码。编码格式一错位，解码自然就乱套了，显示一堆乱码。

为了解决这个跨编码的难题，当时在网上进行了一番搜寻，最终找到了一位技术前辈分享的巧妙方案——利用iframe来实现GBK/GB2312与UTF-8之间的编码转换。这个方法非常实用，为了避免自己日后遗忘，也希望能给遇到同样问题的朋友指个路，特此将核心思路和代码整理出来。文末也会附上参考的文章链接，以供深入查阅。

1、编码(支持GBK和GB2312)

其核心思路是，通过动态创建表单（form）并指定其accept-charset属性为目标编码（如GBK），然后提交到一个隐藏的iframe中。这样一来，iframe页面接收到的查询字符串，就已经被浏览器按照指定编码重新编码过了。

为了流程干净，我们可以把表单的提交目标设为当前页面本身，并把回调函数放在页面JS的最前面。这样，当这个页面作为iframe子窗口加载时，就能立刻执行父窗口预设的回调函数，然后自动关闭自己，整个过程对用户无感。

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）

解码端的思路同样巧妙，它利用了data:协议和动态脚本执行。通过创建一个script标签，将其src指向一个指定了字符集的data:text/ja vascript URL，并在URL中直接执行回调函数，从而让浏览器自动完成解码工作。

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/ja vascript;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

热门推荐

AI教程

企业如何高效整合多表格数据提升决策效率

Excel多表数据整合：四种高效方法详解 在日常办公与数据分析中，我们经常需要处理分散在不同表格中的数据。销售业绩、客户资料、财务流水等信息往往各自独立，如何快速、准确地将它们合并为一份完整的视图，是提升工作效率的关键。本文将系统介绍Excel中四种实用的多表数据整合技巧，帮助您轻松应对各类数据合并

热心网友

05.26

AI资讯

养蚕流程图解从孵化到结茧全过程详解

ignore-error 1 " uploadprocessed= "true "> 1 养蚕全过程概述：从蚕卵到蚕茧的关键步骤 成功养殖家蚕并收获高品质蚕丝，是一个系统化、精细化的管理过程。整个流程环环相扣，涵盖了选种孵化、幼虫饲养、上蔟结茧与采收处理等多个核心阶段。其中，温度与湿度的精准控制、新鲜

热心网友

05.26

游戏攻略

空洞骑士丝之歌全红色道具收集攻略与获取方法

《空洞骑士：丝之歌》中红色护符能显著改变角色能力，影响战斗与探索策略。其获取通常需完成高难度挑战或深度探索，例如击败特定敌人、破解环境谜题、完成隐藏任务或与特殊商人交换。了解这些护符的效果与获取方式，有助于玩家规划成长路线，从容应对游戏中的试炼。

热心网友

05.26

AI教程

MetaGPT多智能体框架如何用自然语言编程简化开发

MetaGPT产品介绍 在软件开发领域，效率与门槛一直是两个难以兼顾的痛点。MetaGPT的出现，正是为了解决这个问题。它本质上是一个基于多智能体协作框架的AI平台，目标很明确：让用户用最自然的方式——说话，来驱动复杂的软件构建过程。 那么，它具体是如何运作的？我们可以从几个核心维度来看： 多智能体

热心网友

05.26

游戏资讯

游戏产业升级：聚焦产品创新机遇与赋能策略

游戏产业步入高质量发展关键阶段，亟需资源整合与创意孵化平台。2026创新游戏&开发者大会以“创意无限，游启新机”为主题，将于2026年6月11日至12日在杭州举办。大会通过专场分享、项目路演等形式，连接行业从业者与创作者，加速优质创意落地，推动产业协同升级与高质量发展。

热心网友

05.26