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

推薦する

JavaScript 関数のカリー化

目次1 関数カリー化とは何ですか? 2 カレーの役割と特徴2.1 パラメータの再利用2.2 早期復帰...

Windows で複数の MySQL インスタンスを実行する方法

序文Windows では、各インスタンスに適切なパラメータを使用してコマンド ラインから複数の My...

CSS 画像アニメーション効果のサンプルコード(フォトフレーム)

この記事では、CSS 画像アニメーション効果(フォトフレーム)のサンプルコードを紹介し、皆さんと共有...

ccs3に基づくタイムライン実装方法

Web プロジェクトでは、タイムライン コントロールをよく使用します。この記事では、項目ごとに展開で...

MySQL スロークエリ関連パラメータの原理の分析

MySQL スロー クエリ (正式名称はスロー クエリ ログ) は、MySQL によって提供されるロ...

フロントエンドJavaScriptの動作原理

目次1. JavaScript エンジンとは何ですか? 2. V8エンジン3. ランタイム環境4. ...

MySQL での coalesce() の使用に関するヒントのまとめ

序文最近、偶然 MySQL の coalesce を発見しました。ちょうど時間があったので、MySQ...

Linux mpstat コマンドの使用方法の詳細な説明

1. mpstatコマンド1.1 コマンド形式 mpstat [ -A ] [ -u ] [ -V ...

Linux または Android でファイル システムを追加する属性インターフェイスを解析する方法

最初のもの: 1. 主要なヘッダーファイルを追加します。 #include <linux/of...

MySQL 起動エラー InnoDB: ロックできません/ibdata1 エラー

OS X 環境で MySQL を起動すると、エラー メッセージが表示されます。 016-03-03T...

uniapp エントリーレベル nvue クライミングピット記録の分析

目次序文こんにちは世界画像 境界線の半径を設定する実ピクセルを設定する外部CSSをインポートttfフ...

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

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

React refsの詳細な紹介

1. 何ですかRefs 、コンピューターでは Resilient File System (ReF...

Alibaba Cloud Centos7.3 インストール mysql5.7.18 rpm インストール チュートリアル

MariaDBをアンインストールするCentOS7 ではデフォルトで MySQL の代わりに Mar...

HTML にオーディオファイルを挿入してブラウザで再生する場合の互換性の問題

HTML にオーディオ ファイルを挿入した後 (mp3 ファイルを再生した後) に発生したいくつかの...