IEでjavascript:window.open()を使うとURLエンコード文字が文字化けするので対策を考えた

例えば、ジャバスクリプトで小窓を開く、そして親窓から小窓に文字列を送る。そんなとき、活躍する言語がjavascriptですが彼が問題を起こしてくれました！(原因はIEなんですが･･･)

URLエンコードした文字が化ける！

とてつもなく困ります！まずは、何をしたいかを具体的にします。

文字をエンコードする

まずは、URLエンコードですが、文字通り文字をURL化します。

$str = "エンコードしたい文字列";
$enc = urlencode($str);

出力例：
%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89%E3%81%97%E3%81%9F%E3%81%84%E6%96%87%E5%AD%97%E5%88%97

これで、文字がURL化します。この数字とアルファベットの文字列をパラメータとしてくっつけます。

エンコードした文字列をパラメータとして付加する

URLの後ろに「？」と「get」用の名前をつけてエンコードした文字を付けます。

形成したURLサンプル

http://www.example.com?enc=%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89%E3%81%97%E3%81%9F%E3%81%84%E6%96%87%E5%AD%97%E5%88%97

これをすると、飛び先で文字列を取得することが出来ます。

この一連の流れをjavascriptで小窓を開いて文字列渡しを実現したいわけです！

javascript:window.open()を使って小窓を作り文字列を渡す

さぁ、実際にジャバスクリプトで小窓を作って文字列を渡します！ここで問題が発生します！

下記の方法は文字化けします！

<a href="javascript:window.open('http://example.com?enc=
<?php $str = "エンコードしたい文字列"; echo urlencode($str); ?>', 
'window01', 'width=500, height=550, crollbars=yes')"
>コレだと文字化けします</a>

何度やっても文字化けします。IEだけ文字化けします。IEだけ文字化けします！どうしても、IEだけ！IEだけ！文字化けします！

確認として、直接アドレスバーにURLを入力してアクセスしましたが、問題なし！URLは正しい。javascriptが問題みたい。・・・というかIEが問題だ！

IEでも文字化けしない方法

それでは、IEでも文字化けしない方法です。解決方法チェックですよ！

<a href="" 
onclick="window.open('http://example.com?enc=
<?php $str = "エンコードしたい文字列"; echo urlencode($str); ?>', 
'window01', 'width=500, height=550, scrollbars=yes');return false;"
>コレは文字化けしない</a>

この方法だと文字化けしないのです。あと、return false;を忘れないように注意です。親ページをジャンプさせない魔法です。

onclickを使うことで文字化けせずに動きます。ブラウザが勝手に何かやってるのか？まぁ兎に角、この問題はonclickで解決しました(｀･ω･´)ゞ