SQLの窓

2014年03月16日


IEでも動作します : jQuery で、FORM の accept-charset を動的に変更して UTF-8・EUC-JP・SHIFT_JIS に対して同時送信


IEは、accept-charset だけでは動作しません

厳密に言うと、accept-charset だけで動作するのは UTF-8 のみです。他のキャラクタセットでも動作させるには、document.charset も同時に変更して同じにする必要がありました。

で、余談として FORM 内に submit という id を持つボタンを作って実行すると、jQuery の submit が動作しなくなるという現象が起きました。これも、他でも起こっている事をインターネット上で既に見かけていました。

送信直前に変更している内容

1) PHP に渡す為の hidden フィールドの値
   ( これで新しいページのキャラクタセット決定 )
2) どの IFRAME に送るかを決める target 属性
3) 変換先のキャラクタセットである accept-charset属性
4) IE の場合だけ、document.charset を変更して、送信後には元に戻す

以下のコードを見ていただいたほうが、解りやすいと思います。結局、HTML での操作は無理があります。スクリプトで変更する事によって全てのブラウザで動作するはずです。( ただ、IE11 でのエミュレーションでしかテストしていないので、実際の IE8 等の動作はまだ未確認です )
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script type="text/javascript">

$( function() {
	$('#submit').click(function() {
		// IE 判定用
		var userAgent = window.navigator.userAgent.toLowerCase();
		var saveCharset = document.charset;

		// UTF-8 で utf8 IFRAME に送信
		$('#charset').val("utf-8");
		$('#target').attr("target", "utf8");
		$('#target').attr("accept-charset", "UTF-8");
		$('#target').submit();

		// EUC-JP で ujis IFRAME に送信
		$('#charset').val("EUC-JP");
		$('#target').attr("target", "ujis");
		$('#target').attr("accept-charset", "euc-jp");
		if (userAgent.indexOf("msie") > -1 || userAgent.indexOf("trident/7.0") > -1) {
			document.charset = 'euc-jp';
		}
		$('#target').submit();

		// SHIFT_JIST で sjis IFRAME に送信
		$('#charset').val("SHIFT_JIS");
		$('#target').attr("target", "sjis");
		$('#target').attr("accept-charset", "shift_jis");
		if (userAgent.indexOf("msie") > -1 || userAgent.indexOf("trident/7.0") > -1) {
			document.charset = 'shift_jis';
		}
		$('#target').submit();

		// IE の場合だけ元に戻す
		if (userAgent.indexOf("msie") > -1 || userAgent.indexOf("trident/7.0") > -1) {
			document.charset = saveCharset;
		}
	});
});

</script>
<pre>
▼ JavaScript による送信ボタン
<input id="submit" type="button" value="送信">
<form id="target" method="post" action="http://winofsql.jp/charset.php">
▼ 本来は非表示ですがテストなので readonly(送信すると3回使われるので表示されるのは SHIFT_JIS)
<input type="text" id="charset" name="charset" readonly>
<textarea
	style='width:400px;height:100px;'
	name="text"
>あいうえお</textarea>
</form>
▼ utf-8
<iframe style='width:400px;height:100px;' name="utf8"></iframe>
▼ euc-jp
<iframe style='width:400px;height:100px;' name="ujis"></iframe>
▼ shift_jis
<iframe style='width:400px;height:100px;' name="sjis"></iframe>
</pre>

▼ charset.php
<?php
header( "Content-Type: text/html; Charset={$_POST['charset']}" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=<?= $_POST['charset'] ?>">
</head>
<body>
<pre>
<?= $_POST['text'] ?>
</pre>
</body>
</html>




▼ JavaScript による送信ボタン

▼ 本来は非表示ですがテストなので readonly(送信すると3回使われるので表示されるのは SHIFT_JIS)
▼ utf-8 ▼ euc-jp ▼ shift_jis



【jQueryの最新記事】
posted by lightbox at 2014-03-16 00:13 | jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり