社内用のWebシステムにこれまで設置してなかった「閉じる」ボタンを設置することになった際、少々ブラウザ問題でつまずいた点があった。ググっても最近のwindow.close周辺の情報を見つけることができなかったのでまとめておく。
photo credit: flod via photopin cc
１．まず、閉じるボタンの必要性
２．IE（シェア：57.8%）の場合
３．Firefox（シェア：18.9%）の場合
４．Chrome（シェア：16.0%）の場合
５．safari（シェア：5.6%）の場合
６．まとめ
※ちなみにバージョンはie10、firefox26.0、chrome 31、safari 5.1.7です。
ブラウザには標準で×（閉じる）ボタンがついているのに、どうして閉じるボタンを自作する必要が生じるのか？
一般的には、システム終了のタイミングで何らかの処理を走らせたい場合などが考えられる。
例えばログイン機能を持つWebシステムを複数人が同一PCで使用するような場合、ブラウザの×ボタンで閉じただけではCookieにユーザー情報が残ってしまったりするため、ブラウザの×ボタンを押されないような仕組みにするか、押された場合でもきちんと直前にログオフするような仕組みを設けるのが親切な設計である。
ただし、今回の場合はユーザー情報保持にCookieではなくセッションを使っているため、このような背景は関係ない（セッションだと閉じると同時にクリアされる）。単純にシニア層も使用する頻度が高いシステムだったため、ブラウザ上部に小さく存在する「×」ボタンにマウスフォーカスするのは億劫なのではないかという親切心から、大きめの閉じるボタンを設置したほうがいいのではという流れ。ユーザインターフェース面から設置することになったという珍しいパターンである。
いまだに大きなシェアを保持するIE（2013年8月時点でIE10は57.8%。ソースはここ。ちなみに当社内での使用比率は90%）を中心に考える。
まず、閉じるためのJavascriptを単純に下記のようにする。
onclick='window.close()'
きちんと閉じてくれた。
但し、以下のような確認ダイアログが出るため、ユーザはクリック操作が一つ増えてしまう。
ウィンドウは表示中のWebページにより閉じられようとしています。このウィンドウを閉じますか？
そこで以下のようにする。
onclick='window.open('about:blank','_self').close()'
ワンクリックでキレイに閉じてくれた。
ieに対しては上記いずれの方法でも対応できたが、他のブラウザではどうか？
ieにはこれまで痛い目に合わされてきたので最低ランクに位置付けてはいるが、ieでできたからといってたかをくくってはいけない。一通り試してみると、少し意外な結果に...。
onclick='window.close()'
なんと閉じない。
但し、これはFirefoxデフォルトのセキュリティ設定によって閉じないようにしているだけ。config設定を修正するとwindow.closeはふつうに使用できる。Firefoxでwindow.closeが使えない問題は長年にわたって議論されてきた問題らしい。
urlのところに「about:config」と入力し、「細心の注意を払って使用する」をクリック。
検索ボックスに「close」と入力して、close関連の設定のみ抽出し、「dom.allow_scripts_to_close_window」をダブルクリックで有効にする。
ちなみにこのconfig設定なしに下記も実行してみる。
onclick='window.open('about:blank','_self').close()'
空白タブが残るという気持ち悪い結果に。
上記config設定を行えばキレイに閉じる。
onclick='window.close()'
閉じない。
onclick='window.open('about:blank','_self').close()'
閉じる。
※Chromeの場合、逆にワンクリックで閉じるのを防ぐために「Window Close Protector」というアドオンが存在する模様。
onclick='window.close()'
閉じない。
onclick='window.open('about:blank','_self').close()'
閉じる。
| IE 10 | firefox 26.0 | chrome 31 | safari 5.1.7 | |
|---|---|---|---|---|
| window.close()のみ | ○ | × config設定で○ | × | × |
| window.open('about:blank','_self').close() | ○ | △タブが残る config設定で○ | ○ | ○ |
意外にもfirefoxに難ありという結果に。
このあたりの話がググってもあまり出てこないのは（露出が少ないだけ？）webサービスは個人向けという大前提のため、サービス提供側はcookieにはユーザー情報を残したいという考えがあり（当たり前だけど）、cookieを削除したい人はブラウザの設定でやってねという前提があるからか。
jQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) - TechNotejQueryUIは、インタラクティブなWebサイトを開発するために使用されるjQueryベースのUIライブラリです。このため、多くのサイトで「簡単」「手軽」など...
システム管理者でなくても知っとくべき！ Windowsサーバ／クライアントの時刻同期設定まとめ - TechNoteコンピュータの内臓時計はズレやすいため、「時刻同期」について検討することはとても重要なことと思われますが、その重要性はあまり認識されていない気がします。私も先日...
BootstrapにぴったりのWebアイコンフォント FontAwesome 4.0.0 が公開されていた件 - TechNoteしばらくニュースをチェックできずにいて何気なくFontAwesomeのサイトを覗いてみたら、FontAw...
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)
联系客服
