文字列の GBK および GB2312 エンコードとデコードのフロントエンド実装 (概要)

文字列の GBK および GB2312 エンコードとデコードのフロントエンド実装 (概要)

序文

プロジェクトを開発しているときに、かなり厄介な問題に遭遇しました。この製品では、判断のためにブラウザのアドレスバーにある検索語をブラウザから取得する必要があります。通常はUTF-8エンコード形式を使用しますが、BaiduとGoogleはどちらも検索語をエンコードするときにGBKエンコードを使用します。これにより、デコードに失敗します。そこで、オンラインで解決策を探したところ、ようやく先輩が解決した方法を見つけました。問題はiframeを介して解決したので、自分の将来のためにここにまとめたいと思います。また、より多くの人々の助けになることを願っています。最後に、フロントエンドの記事へのリンクを貼っておきます。

1. エンコーディング(GBKおよびGB2312をサポート)

トラブルを回避するには、フォームのリクエスト ページを現在のページとして設定し、コールバック関数をページ JS の先頭に配置します。このようにすると、このページに親ページがあり、__encode__iframe__callback__ が定義されている場合に、コールバックを直接実行してウィンドウを閉じることができます。

if (parent.__encode__iframe__callback__) { // 現在のページが子ウィンドウかどうかを判断します parent.__encode__iframe__callback__(location.search.split('=')[1]);
    //現在のサブウィンドウを直接閉じます。window.close();
}
関数 GBKEncode(str, charset, callback) {
    //フォームを作成し、accept-charsetを使用してエンコードします
    var フォーム = document.createElement('フォーム');
    フォームメソッド = 'get';
    フォームスタイルの表示 = 'なし';
    フォーム.acceptCharset = 文字セット;
    ドキュメントがすべての場合
        //IE の場合は、document.charset メソッドを呼び出します。window.oldCharset = document.charset;
        document.charset = 文字セット;
    }
    var input = document.createElement('input');
    入力タイプ = '隠し';
    入力.name = 'str';
    入力値 = str;
    フォームに入力を追加します。
    form.target = '__encode__iframe__'; //送信先のiframeを指定する
    document.body.appendChild(フォーム);
    //送信された文字列を傍受するためにiframeを非表示にする if (!window['__encode__iframe__']) {
        var iframe;
        iframe = document.createElement('iframe');
        iframe.setAttribute('name', '__encode__iframe__');
        iframe.style.display = 'なし';
        iframeの幅 = "0";
        iframe.height = "0";
        iframe.scrolling = "いいえ";
        iframe.allowtransparency = "true";
        iframe.frameborder = "0";
        iframe.src = 'about:blank'; // 空白に設定 document.body.appendChild(iframe);
    }
    //
    window.__encode__iframe__callback__ = 関数 (str) {
        コールバック(str);
        ドキュメントがすべての場合
            document.charset = window.oldCharset;
        }
    }
    // コールバック エンコーディング ページのアドレスを設定します。ここで、ユーザーは form.action = window.location.href; を変更する必要があります。
    フォームを送信します。
    setTimeout(関数() {
        フォームの親ノードを削除します。
        iframe の親ノードを削除します。
    }, 1000) // 0.5秒後にノードを削除します }
GBKEncode('エンコードする文字', 'gb2312', callback); // テスト // カプセル化の約束 var encode = function encode(str) {
    var charset = arguments.length > 1 && arguments[1] !== 未定義 ? arguments[1] : 'gbk';
    新しいPromise(function(resolve,reject))を返す{
        試す {
            _encode(str, 文字セット, 関数(データ) {
                解決(データ);
            });
        } キャッチ (e) {
            解決('文字エンコードエラーです。', e.toString());
        }
    });
};

2. デコード(GBK、GB2312、Base64をサポート)

関数 randomId() {
    var テキスト = "";
    var 可能 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    (var i = 0; i < 5; i++) の場合 {
        テキスト += possible.charAt(Math.floor(Math.random() * possible.length));
    }テキストを返します。
}

関数_decode(str, charset, callback) {
    var スクリプト = document.createElement('script');
    var id = randomId(); // 競合を防ぐために一意の ID を生成します。script.id = '_urlDecodeFn_' + id;
    window['_urlDecodeFn_' + id] = コールバック;
    var src = 'data:text/javascript;charset=' + charset + (',_urlDecodeFn_' + id + '("') + str + '");';
    src += 'document.getElementById("_urlDecodeFn_" + id + '").parentNode.removeChild(document.getElementById("_urlDecodeFn_" + id + '"));';
    スクリプトをロードします。
    document.body.appendChild(スクリプト);
}
_decode('デコードする文字', 'gb2312', callback) // テスト // promise カプセル化 var decode = function decode(str) {
    var charset = arguments.length > 1 && arguments[1] !== 未定義 ? arguments[1] : 'gbk';
    新しいPromise(function(resolve,reject))を返す{
        試す {
            _decode(str, 文字セット, 関数(データ) {
                解決(データ);
            });
        } キャッチ (e) {
            解決('文字デコードエラーです。', e.toString());
        }
    });
};

参考リンク: https://zhuanlan.zhihu.com/p/35537480

GBK および GB2312 文字列エンコードとデコードのフロントエンド実装に関するこの記事はこれで終わりです (概要)。より関連性の高い文字列 GBK および GB2312 エンコードとデコード コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  高さ:100% が機能しないのはなぜですか?

>>:  HTMLでカメラを読み込む方法

推薦する

基本構造、ドキュメント タイプ、ヘッダー、本文などの一般的な HTML 要素の概要。

1. 基本構造:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBL...

Docker の 4 つのネットワーク タイプの主な例

4 つのネットワーク タイプ:なし: コンテナのネットワーク機能を一切設定しません。--net=no...

HTML 代替カラーコードを実現する n 通りの方法 サンプルコード

この記事では、主に HTML のサンプル コードを紹介し、次のように交互に色を変更する方法を共有しま...

3つの簡単な調整でMySQLを最適化する

私は熟練した DBA になるつもりはありませんが、MySQL を最適化するときは、いくつかの構成を調...

ウェブデザインにおけるキーワード設計手法の紹介

多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...

MySQL 上級学習インデックスの長所と短所、使用ルール

1. インデックスの利点と欠点利点: 高速検索、高速グループ化および並べ替えデメリット: ストレージ...

CentOS 7.6 仮想ネットワーク カードのバッチ追加、変更、削除操作の紹介

1 カーネルにtunモジュールがあるかどうかを確認する modinfo tun modprobe t...

Xshellの一般的な問題と関連する設定の詳細な説明

この記事では、Xshell と関連する構成の一般的な問題について説明します。この記事の構成は、主に ...

nginx を使用して wgcloud へのアクセスを構成する方法

nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...

vue-cli 設定では Vuex の完全なプロセスレコードを使用します

目次序文インストールと使用方法モジュラー管理Vuex の状態永続性要約する序文Vue 開発では、ユー...

lastInfdexOf 関数の MySQL 実装例

MySQL では lastIndexOf に似た関数を使用する必要がある場合もありますが、すぐに使用...

Reactでコンポーネントを作成する方法

目次序文コンポーネントの紹介クラスコンポーネントの作成状態についてレンダリングについて関数コンポーネ...

Centos 6.5 での mysql-community-server. 5.7.18-1.el6 のインストール

次のコマンドを使用して、MySQL Serverがインストールされているかどうかを確認します。 [r...

CSSの使用に関する深い理解 clear:both

clear:both清除浮動これは私が常に持っていた印象ですが、私はこれをめったに使用せず、私の理...

Win7 で IIS7 Web および FTP サービスを完全にアンインストールする方法

昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...