本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > 网页其他 >

收藏
分享到

前端实现字符串GBK与GB2312的编解码总结

网页其他 来源：互联网 作者：佚名 发布时间：2024-11-22 17:46:03 人浏览
摘要

在开发项目的时候遇到的一个比较坑的问题，产品要求从浏览器拿到浏览器地址栏里面的搜索词进行判断，我们一般使用的都是UTF-8的编码格式，但是百度和谷歌在对搜索词编码的时候都是使用

在开发项目的时候遇到的一个比较坑的问题，产品要求从浏览器拿到浏览器地址栏里面的搜索词进行判断，我们一般使用的都是UTF-8的编码格式，但是百度和谷歌在对搜索词编码的时候都是使用的GBK编码，这就导致，解码失败，于是就在网上找解决方法，最终找到了一位前辈整理出来的方法，通过iframe解决了这个问题，所以特此总结一下，方便自己以后使用，也希望能帮助到更多的人，最后会放上前端文章的链接。

1、编码(支持GBK和GB2312)

为了避免麻烦，我们可以将表单的请求页面设定为当前页面，将回调函数放在页面JS的最前面，这样当此页面存在父页面并且__encode__iframe__callback__定义了，就可以直接执行回调，并关闭窗口：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

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
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • Table和div的介绍及用法
    Web前端1 学号 姓名 性别 年龄 01 张三 男 20 02 李四 女 21 人数合计 60 表格的组成部分： 标题 表头 主体 表尾 Table 定义一个表格 1 2 table bord

  • 告别硬编码让你的前端表格自动计算的代码

    告别硬编码让你的前端表格自动计算的代码
    当我的团队进行税务系统模块开发的时候，我发现他们需要花费80%的时间去解决计算问题，尤其体现在表格（Grid）中的计算，这些时间花在
  • 前端实现字符串GBK与GB2312的编解码总结
    在开发项目的时候遇到的一个比较坑的问题，产品要求从浏览器拿到浏览器地址栏里面的搜索词进行判断，我们一般使用的都是UTF-8的编码格
  • 网页中使用Unicode字符的简介(&#,\u等)
    最早的计算机只能使用ASCII字符，但随着计算机应用范围的扩展，很多国家都设计了用于计算机的特殊字符集，使自己国家和民族的字母及文

  • bootstrap panel的详细介绍

    bootstrap panel的详细介绍
    1、面板 面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同
  • Bootstrap中列表组、分页和进度条组件的用法介绍
    列表组 使用.list-group选择列表组 添加.active到 a.list-group-item以指示当前的活动选择。【相关推荐：《bootstrap教程》】 添加.disabled到 a.list-gr
  • bootstrap中栅格布局的详细介绍
    1.什么是栅格布局？ 以前的网页制作布局用的是tabel布局，通过把表格将网页分为大大小小的表格，再从表格中填充元素。后来发展为div+c

  • bootstrap用于jsp页面的详细介绍

    bootstrap用于jsp页面的详细介绍
    jsp页面是指在传统的HTML页面文件中加入java程序和jsp标签的页面 JSP 页面的扩展名为 .jsp 或.jspx，web 服务器通过此扩展名通知 JSP 引擎处理该
  • bootstrap是自适应的吗？
    bootstrap是自适应的吗 bootstrap是自适应的 自适应是 不管屏幕多大，都尽量不换行，而只是横向缩放。而Boostrap是通过栅栏系统实现自适应的。

  • bootstrap怎么做到点击表格表头排序

    bootstrap怎么做到点击表格表头排序
    本篇文章介绍bootstrap怎么做到点击表格表头排序 使用Bootstrap可以快速制作出响应式网页，有时候项目中会用到Bootstrap点击表格table的表头列
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计