序文 プロジェクトを開発しているときに、かなり厄介な問題に遭遇しました。この製品では、判断のためにブラウザのアドレスバーにある検索語をブラウザから取得する必要があります。通常は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 をよろしくお願いいたします。 |
目次MySQL 切り捨ての使用1. 構文を切り捨てる2. Truncateの使用上の注意3. TRU...
transform:scale()比例したズームインまたはズームアウトを実現できます。 transi...
目次概要1. 範囲エラー2. 参照エラー3. 構文エラー4. タイプエラー5. URIエラー6. 評...
最近、複数のdivにあるテーブルのTDを同じ幅に調整しても、揃えることができず、幅にパターンがないこ...
プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...
序文Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js の...
ストレージエンジンデータベース ストレージ エンジンとは何ですか?データベース エンジンは、データベ...
XML スキーマは、DTD に代わる XML ベースのものです。 XML スキーマは、DTD に代わ...
目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...
目次Vue ミックスインの使用ミックスインでのデータアクセスミックスイン/index.jsホーム.v...
目次序文スタイルローダーCSSローダーsassローダーpostcssローダーバベルローダーtsローダ...
目次1. Jquery を使用する手順: (1)jsライブラリをインポートする(2)ページ読み込みイ...
前の 2 つの記事の簡単な紹介を通じて、Bootstrap についての基礎的な理解が得られました。 ...
最近のプロジェクトでは、テキストを垂直に揃えたいと考え、CSS の writing-mode プロパ...
1つ。 Mysql Binlog フォーマットの紹介 Mysql binlog ログには、State...