ふとJavaScriptでのURLエンコードはどうするのかと疑問に思っていたところ、同じように考えた人がいたらしく、あっさり解決。
——————
var hogeWord=$("#keyword").val();
var url = '/hoge/get_xml.php?n= hogeWord;
——————
これだとIE（6〜8で検証）で不具合が生じた
↓
URL全体のエンコードは
encodeURI(URL文字列)
特定の文字列のみエンコードする場合は
encodeURI(文字列)
適用してみた 無問題！！
——————
var hogeWord=$("#keyword").val();
var url = '/hoge/get_xml.php?n=encodeURI(KeyWord);
——————
※基本javascriptはjquery APIを使用して開発しております。
jQueryライブラリでライトボックス風表示のThickBoxでちょっとつまづいてしまった点。
ThickBox3の配布元はこちら
「Download」のタブで表示されている部分に各ファイルへのリンクがありますので、
対象ファイルを保存します。
以下のファイルが必要です。
thickbox.js
thickbox.css
loadingAnimation.gif
jquery-latest.js
さて今回私が実装しようとしていたのは、iframeを使用した別htmlの表示です。
まずデフォルトのウィンドウ全体の透過背景、タイトルと閉じるボタンを削除したかったので下記を修正しました。
ウィンドウ全体の透過背景
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
↓
削除
タイトルと閉じるボタンを削除
$("#TB_window").append("
"+caption+"
close
or Esc Key
");
↓
$("#TB_window").append("");
iframeのhtml(例：hoge.html)に任意のソースを記述します。
<a href="hoge.html?width=400&height=200" class="thickbox">〜</a>
で、閉じるボタンをhoge.html内に記述しました。
iframe内からですと親ウィンドウの操作になります。
さてどうしようかと悩みました。
答えはあっさりしたものでした。
self.parent.tb_remove();を使うだけでした。(O.O;)(o。o;)
下記iframeのhtmlの例です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" media="all" href="css/iframe.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type="text/javascript">
$(function() {
$('#TB_closeWindowButton').click(self.parent.tb_remove);
});
</script>
<title> thickbox-iframe</title>
</head>
<body>
<div>
<h1>タイトル</h1>
<p>ダミーテキスト</p>
<div><a href='#' id='TB_closeWindowButton' title='閉じる'>close</a></div>
</div>
</body>
</html>
