Iframeで問題点を解決？複数の文字コードをform から送信する方法２

Iframe を利用して複数の文字コードをformからCGIへ送信する方法

今回の目的

前述の IEでの解決策では document.charset='○○'; で一時的にページ自体の Charset を変更する為、切り替え時の画面の揺れや IEでは解決出来ない重大な欠点等の問題を抱えたままの状態です。
と知りつつ１年以上放置してきたわけで、反省です。

と言うわけで今回はこれらの問題点を解決する別の方法を探る事にしました。
勿論 CGI を使わず HTML と JavaScript だけで各種文字コードを URI エンコードし送信すると言う基本的テーマに変わりは有りません。

取り合えず数多くの方法を手探りで試して見ましたがどれも一長一短で、変換は上手く出来てもソースが異常に長くなったり、ポップアップ遮断機能にひかかってしまい使えない物など最初は散々な状態でした。
そんな中で何とか使えそうなのがインラインフレームを利用した方法だったのです。

当然 Iframe に対応していないブラウザには対応できませんので100％対応とは言えませが Web資料館-ブラウザのシェア調査や KENT WEB さんのAccess Report 等を見ると Iframe 対応ブラウザの割り合いの判断が付き、まあ、そこそこ使えるのでは無いかと言う思いでメタ検索のページすべてを変更する事にしました。

以降このページではインラインフレームを利用し文字コードの問題を解決する方法を述べてみます。
実際の所まだ検証が充分に済んでいるとは言えず予期しない問題が発生する可能性がある事を承知して頂きたいと思います。

インラインフレームで文字コードの問題を解決する

HTML で記述する Form から送信されるコードは大抵のブラウザではメタタグの
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
で指定された文字コードを URI エンコードした形になるはずです。
ならば Form だけ別の charset のページに記述しておき、その Form から送信すればなんら問題が起きる事は無いはずです。

元になるページが charset=Shift_JIS で EUC-JP を送信したいのであれば
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
を記述した Form だけのページを EUC-JP で保存し元のページに Iframe で取り込みその Form から送信すれば良いわけです。
複数の charset が必要な場合は charset の数だけ Form だけのページを作り複数の Iframe で取り込みます。

別に用意した Form だけのページの <input ・・・は全て type="hidden" として表示されないようにし、元のページに文字列入力用の窓 <input type="text" name="○○" value=""> を用意します。
この元のページの窓に入力された文字列を JavaScript 使って、インラインフレームへ取り込んだ EUC-JP のフォームの Value へ書き込む様にします。
後は文字列を書き込んだ Form に対して JavaScript で ★.submit() を実行すれば良いだけです。

具体例：　Shift_JIS のページから EUC-JP を送信

このページは Shift_JIS ですが下記は EUC-JP で Yahoo! を検索する例です。
勿論 Yahoo! は Shift_JIS でも受け付けてくれますが参考例として検証に利用します。

下の枠は iframe の枠ですが取り合えずインラインフレーム内のソースを右クリックなどで見えるようにする為に何も細工をしていません。
実際に使う場合は iframe の属性指定や CSS で見えないようにした方が良いのですが CSS で display: none としてしまうと NN や最近流行の Firefox では無い物として処理？（エラーにならない）されてしまい機能しなくなります。

上のフォームのソースです。　下記ソースの赤字の箇所が夫々対応している事に注目してください。
Form や JavaScript の使い方は各自様々あると思いますが基本的な仕掛けはこんな感じです。

<form name="fm" action="" onSubmit="return false;">
　<input type="text" name="tex" value="" size="31">
　<input type="submit" value="送信" onClick="fw=euc.document.f_yahoo; fw.p.value=fm.tex.value; fw.submit();">
</form>
<br>
<iframe src="./charform/charset_euc.html" name="euc" title="euc-jp">
　ここにEUC-JPのFormをインクルードしています。
</iframe>

ご覧のようにEUC-JP の Form だけのファイル charset_euc.html をインラインフレームで取り込んでいます。
上記フォームの最初の行
<form name="fm" action="" onSubmit="return false;">
この行の return false; の意味は削除してみればすぐに判ると思います。
このフォームは実際に送信するフォームでは無くオブジェクトとして認識させる為に必要なフォームですから、このフォームを Submit されると余分なページが表示される等、困った事になります。
なお、このままのソースですと IE ではエンターキーが働きませんが下記の様な方法でエンターキーを取得する事も可能です。

下記は iframe にインクルードしたファイルのソースで、このファイルは EUC-JPで保存してあります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
　<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
　<title>EUC-JP form</title>
</head>
<body>


<form name="f_yahoo" method="GET" action="http://search.yahoo.co.jp/bin/search" target="_top">
　<input type="hidden" name="p" value="">
</form>

</body>
</html>

注意事項や応用例

このインラインフレームを使った文字コード変換方法を応用した物が各検索ページに置いてあります。 Web検索の文字コードは Shift_JIS です。
このページは Shift_JIS の Form を直接そのページに記述し euc.htm (EUC-JP)と utf.htm (UTF-8) の異なる Charset を持つファイルは Iframe で取り込んでいます。
詳細についての説明は致しませんが興味をもたれた方はソースを参考にしてください。

Form だけの外部ファイルですが必ずしも Charset と同じ文字コードで保存する必要は無いかもしれません。
実はutf.html (UTF-8) このファイルは UTF-8 で保存できるエディターが無かった為 Shift_JIS で保存されていますが一応ちゃんと機能しています。
この場合ファイル内で使える文字は半角（アスキーコードの下位 7Bit 以下で制御コードを除く）だけに成ります。
つまりファイル内に一切日本語を含む事は出来ないと言う事です。
ですから Form 内の Value 等に日本語が含まれていたりするとお手上げには成ります。
出来るだけちゃんとした保存方法にする方が良い事は言うまでも有りません。

追記
実は自分が気が付かなかっただけなのですが Netscape で「ファイル」→「ページを編集」で編集画面を開き「ファイル」→「文字セットを指定して保存」を行うと簡単に任意の文字コードで保存出来るんですね。
こんな事は知ってる人にとっては当たり前の事だと思いますが参考までに。

上記の方法がダメだと思う場合

2004/10/09

なんて、各ページの対応を進めている最中ヌルコムアーカイブスの Yoshio 様から「JavaScriptでJISエンコードも可能なescape 関数ライブラリを作ってみました。」と言うメールが入って来ました。
早速ダウンロードして試してみましたが、これはまさに自分がサイト開設時に捜し求めていたその物でした。
手間も知恵も必要な作業に取り組まれた事に敬意を表したいと思います。

上述のインラインフレームを使う送信方法以外でブラウザに依存せず JavaScript で確実に文字コードの変換をしたい場合はヌルコムアーカイブス開発の
Shift_JISエンコードやEUC-JPエンコードなども可能な escape エンコード・デコード関数のライブラリをダウンロードして利用させてもらうのが一番だと思います。

実効例のページ
現在 CGI を使わずに JavaScript だけで各種文字コードに対応したURIエンコードができる物は他には無いと思います。

この関数ライブラリーを使って Yahoo! に EUC-JP、Google に UTF-8 を送る検索窓を作ってみました。
この関数ライブラリーを利用すると URIエンコードも同時に行われる為別に送信用のフォームを作る必要が無くなります。

この検索窓のソース

EscapeEUCJP(fm2.tex.value) と EscapeUTF8(fm2.tex.value) の部分が関数ライブラリーを使った部分です。
最小限で簡単な方法のサンプルですが JavaScript や関数ライブラリーの使い方次第で様々な応用ができると思います。

実際に使う場合は関数ライブラリをダウンロードして解凍し ecl.js ファイルを適切なホルダーに配置し、外部 JavaScript として取り込む必要があります。
下の ecl.js がJavaScriptで書かれた関数ライブラリのソースファイルで、外部 JavaScript ファイルとして取り込んだ例です。

ページ先頭

Web検索!メタサーチ

MIDIとWMAで音楽

contact