javascriptで文字化け

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

IEだけURLエンコードした文字列をjavascript:window.open()を使って開くと文字化けするので解決方法を考えた
投稿日: 2012/03/13
最終更新日: 2015/12/29
 

例えば、ジャバスクリプトで小窓を開く、そして親窓から小窓に文字列を送る。そんなとき、活躍する言語が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で解決しました(`・ω・´)ゞ

 
最新情報をお届けします
筆者のご紹介
角政典@moreiic
真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。インドアだけど遊んでくれる人募集中!
Twitter / google+
よく検索されてる記事