文字列の 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でカメラを読み込む方法

推薦する

MySQL Truncate の使用方法の詳細な説明

目次MySQL 切り捨ての使用1. 構文を切り捨てる2. Truncateの使用上の注意3. TRU...

マウスを動かしたときに画像のズーム効果とゆっくりとした遷移​​効果を実現するCSSのサンプルコード

transform:scale()比例したズームインまたはズームアウトを実現できます。 transi...

知っておくべき 7 つのネイティブ JS エラーの種類

目次概要1. 範囲エラー2. 参照エラー3. 構文エラー4. タイプエラー5. URIエラー6. 評...

複数のdiv内のテーブルのtdwidth設定は同じで、揃えることができません

最近、複数のdivにあるテーブルのTDを同じ幅に調整しても、揃えることができず、幅にパターンがないこ...

CentOS7 で jar アプリケーションの起動を設定する方法

プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...

Vue Router の 10 の高度なヒントのまとめ

序文Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js の...

MySql ストレージ エンジンとインデックスに関する知識のまとめ

ストレージエンジンデータベース ストレージ エンジンとは何ですか?データベース エンジンは、データベ...

W3C チュートリアル (8): W3C XML スキーマのアクティビティ

XML スキーマは、DTD に代わる XML ベースのものです。 XML スキーマは、DTD に代わ...

Vue のデータ応答性に関する詳細な理解

目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...

Vue ミックスインの使い方の詳しい説明

目次Vue ミックスインの使用ミックスインでのデータアクセスミックスイン/index.jsホーム.v...

Webpack でよく使われる 12 個の Loader を共有する (要約)

目次序文スタイルローダーCSSローダーsassローダーpostcssローダーバベルローダーtsローダ...

この記事は、JQueryの基本的な操作を理解し、始めるのに役立ちます。

目次1. Jquery を使用する手順: (1)jsライブラリをインポートする(2)ページ読み込みイ...

Bootstrap 3.0 学習ノート グリッドシステムの原則

前の 2 つの記事の簡単な紹介を通じて、Bootstrap についての基礎的な理解が得られました。 ...

CSS3を使用してテキストの垂直配置を実現する方法

最近のプロジェクトでは、テキストを垂直に揃えたいと考え、CSS の writing-mode プロパ...

MySQL の 3 つの Binlog 形式の概要と分析

1つ。 Mysql Binlog フォーマットの紹介 Mysql binlog ログには、State...