以前は、アジアではB2312が新しい。
2021-12-31 23:21:59
前書き
この製品はブラウザからの検索語をブラウザのアドレスバーで判断する必要があり、一般的にUTF-8のエンコード形式を使用していますが、BaiduやGoogleは検索語のエンコード時にGBKエンコードを使用しており、デコードに失敗するため、インターネット上で解決方法を探し、結局、先行者を見つけて整理しました iframeで解決する方法をやっと見つけたので、今後のためにまとめ、多くの人のお役に立てればと思って、最後にフロントエンド記事へのリンクも貼っておきますね。
1. エンコーディング(GBK、GB2312対応)
トラブルを避けるために、フォーム要求ページを現在のページに設定し、コールバック関数をページJSの先頭に配置することで、このページが親ページに存在し、__encode__iframe__callback__が定義されている場合、コールバックが直接実行されてウィンドウが閉じられます:そのために
if (parent.__encode__iframe__callback__) { // Determine if the current page is a child window
parent.__encode__iframe__callback__(location.search.split('=')[1]);
//close the current child window directly
window.close();
}
function GBKEncode(str, charset, callback) {
//create form to do encode by accept-charset
var form = document.createElement('form');
form.method = 'get';
form.style.display = 'none';
form.acceptCharset = charset;
if (document.all) {
//if it's IE then call document.charset method
window.oldCharset = document.charset;
document.charset = charset;
charset = 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__'; // specify the iframe that is the target of the submission
document.body.appendChild(form);
// Hide the iframe to intercept the submitted string
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'; // set to blank
document.body.appendChild(iframe);
}
//
window.__encode__iframe__callback__ = function (str) {
callback(str);
if (document.all) {
document.charset = window.oldCharset;
}
}
// Set the address of the callback code page, which needs to be changed by the user here
form.action = window.location.href;
form.submit();
setTimeout(function () {
form.parentNode.removeChild(form);
iframe.parentNode.removeChild(iframe);
}, 1000) // remove the node after 0.5 seconds
}
GBKEncode('Character to encode', 'gb2312', callback);// test
// promise wrapper
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('Wrong character encoding.' , e.toString());
}
});
};
II. デコード(GBK、GB2312、Base64対応)
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(); // Generate a unique ID to prevent conflicts
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('Character to be decoded', 'gb2312', callback) // test
// promise wrapper
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('Character decoding error.' , e.toString());
}
});
};
参考リンク https://zhuanlan.zhihu.com/p/35537480
GBKとGB2312の符号化・復号化のフロントエンド実装(まとめ)の記事は以上です。GBKとGB2312の符号化・復号化に関する詳しい情報は、過去の記事を検索するか、以下の記事を引き続きご覧ください。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン