Category Archives: javascript
[InternetExplorer]親切じゃないJavascriptのalert(e)
ここ数日、Javascriptだったのですが・・・。
先日のエントリの「こ、これでいい？サブ画面の存在判定方法」を次の日にDEBUGしてalert(e)でエラーの内容をIE7で出力してみたところ、
[object error]
とだけ教えてくれました。
・・・
気を取り直して、Firefox3で試そうとしたとき、思い出しました。それは、このWEBシステムがすごい作りになっていたことです。
簡単にいうと、以下のようなソースになっちゃってる。
<html>
<html>
hogehoge
</html>
<html>
hogehoge
</html>
</html>
おそらくですが、Strutsの便利機能「Tiles」の使い方が間違ってる・・・。なので、Firefoxでは画面の表示すらできません。
orz
Firefoxで動作させた感じでは、アラートメッセージが表示されなかったのでエラーにはならないんですね。IE限定かと。
こ、これでいい？サブ画面の存在判定方法
今日も恥・・・ではなく、ソースコード晒し。
昨日のJavaScriptですが、思うような動きにならなかったので修正。
■"開くサブ画面はひとつだけ"を実現したい
やりたいことがこれ。
- 画面A → サブ画面
画面A上のリンクをクリック。onclickイベントでJavaScriptを呼び、その読んだ先でwindow.opne('','hogehoge");でサブ画面を生成して、メイン画面からフォームをサブミットして、そのターゲットにサブ画面を設定する。こんな流れを実装しました。
しかし、このパターンだと、すでにサブ画面が存在する場合は、サブミットしてもすでにある画面が表示されるだけで、サーバーへリクエストが送信されませんでした。
で、サブ画面がすでに存在していたらとにかくCloseすることで対応することにしました。
でやったのが、これ。
var subwin; //サブ画面生成時の戻り値
function opneWindow(){
subwin = window.open('','hogehoge');
try{
//①サブ画面にフォーカスする
subwin.focus();
}catch(e){
//エラーをcatchしたら、サブ画面をクローズ
subwin.close();
}
//ターゲットを設定して、サブミット
form.target = 'hogehoge';
form.action = 'hogeAction';
form.submit;
}
catchしたときの例外内容を確認忘れたw
こんなロジックを組みました。
- 画面A → 画面B → サブ画面
画面AとBの間を行ったりきたりします。画面Bから開くサブ画面はひとつにしたい。これ、どう実現したらいいのかまるでわかりませんでした。いったん画面Aに戻ってしまったら、サブ画面は宇宙の果て・・・的な位置づけで、再度画面Bに遷移したとき、見つけることが・・・できませんよね。
こんな感じで画面を移動
=============================
①回目 画面A → 画面B → サブ画面
～～画面Aに戻る～～
②回目 画面A → 画面B → サブ画面
=============================
で、いろいろ試してできたのが、上のコードです。
1回目のサブ画面が存在している状態で、
2回目 画面B → サブ画面 のとき subwin.focus()はエラーになります。
window.open('','hogehoge');で画面を開く場合、同名のwindowがあると名前の衝突が発生する？のでしょうか・・・。
明日、subwin.focus();で発生する例外の内容を確認しようと思います。
 |
独習JavaScript 高橋 和也 竹添 直樹 里見 知宏 翔泳社 2008-11-20 |
JavaScriptでサブウィンドウの存在をチェックしながら、window.openする方法
自分メモ。できたできた。
タイトルのとおり。
毎回同じwindowめがけてSubmitしたいのですが、すでにTargetととなるサブウィンドウが存在している場合、JspからActionクラスを経由しない症状に困っており、今回のような方法を思いつき、やってみましたよ！
※前回ソースに追記してます。
» クリックのあと、3秒間リンクを無効にするJavaScript
<html>
<head>
<script type="text/javascript">
<!--
//windowオブジェクト
var winobj;
function openSubWindow(){
//サブウィンドウの存在チェック
if(!winobj || winobj.closed || typeof winobj != "undefined"){
//何もしない
}else{
//存在する場合、閉じる
winobj.close();
}
//新規作成
winobj = window.open('file:///C:/Users/hse9212/Desktop/test2.html', 'new_window');
winobj.focus();
return true;
}
//書き換え前HTML
var beforeLinkAreaHtml;
//一定時間リンク無効化
function disableLinkArea(){
//書き換え前を保持
beforeLinkAreaHtml = document.getElementById("linkarea").innerHTML;
//対象のDIV要素内のHTMLを書き換える
document.getElementById("linkarea").innerHTML = "enjoy tricks";
//タイマー処理で、3秒後にHTMLを書き戻す
setTimeout(function(){document.getElementById("linkarea").innerHTML = beforeLinkAreaHtml;},"3000")
//return false;
}
// -->
</script>
</head>
<body>
<div id="linkarea">
<a href="#" onclick="disableLinkArea(); return openSubWindow();">enjoy tricks</a>
</div>
</body>
</html>
ちなみにIE限定を想定しています。サブウィンドウの状態チェックで
window.Closed
はIEの場合、正しい値を返却しないバグあるようですが、これでもうまくいってるのは、あとの条件が聞いてるからでしょうか・・・。実はそのあたり微妙加減はあるのですが、実装。
あとはStrutsとの兼ね合いがうまくいけばいいのですが・・・。
■参考
» JavaScriptで，グローバル変数の存在判定をする３つの方法 （"window"の定義状況を確認したい）
クリックのあと、3秒間リンクを無効にするJavaScript
仕様を無茶振りされたので、その対応に無茶実装返し。
"クリックされたあと、3秒間は無効になるリンク"というものを実現すべく、見よう見まねで実装したのが、以下のJavaScriptです。
<html>
<head>
<script type="text/javascript"><!--
//書き換え前HTML
var beforeLinkAreaHtml;
//一定時間リンク無効化
function disableLinkArea(){
//書き換え前を保持
beforeLinkAreaHtml = document.getElementById("linkarea").innerHTML;
//対象のDIV要素内のHTMLを書き換える
document.getElementById("linkarea").innerHTML = "enjoy tricks";
//タイマー処理で、3秒後にHTMLを書き戻す
setTimeout(function(){document.getElementById("linkarea").innerHTML = beforeLinkAreaHtml;},"3000")
return false;
}
// -->
</script>
</head>
<body>
<div id="linkarea">
<a href="http://enjoytricks.com" target="new_window" onclick="return disableLinkArea();">enjoy tricks</a>
</div>
</body>
</html>
jQueryのプラグインで同じような3秒ルールをFormのSubmitボタンに適応するというものがあったので、それを真似してみました。
とにかく、できました。
