スマホ/幅480px/幅640px

ガレコレ [Garage Collection]
トップページ
News,blog & history


【HTML5&CSS3&JavaScript】
 ウインドウを閉じる命令は下記の通り。

--
window.close();
--

 しかし、閉じれるウインドウは、親ウインドウから新しく開かれた子ウインドウのみである。なので、自身に白紙を開いてから閉じるという有名なハック(不正プログラム)がある。

--
window.open("about:blank","_self").close();
--

 ガレコレのプログラムにも使っているのだが、ブラウザによっては命令が無視され、ウインドウが閉じなくなっている。_selfでは、新しいウインドウで開いたと認識しないんだな。

--
○Microsoft Edge
○IE11
○Safari
×Google Chrome
×Firefox
×Opera
--

 エラー処理で分岐できるだろうと思っていたら、error!とアラートが表示されなかった。window.close()は実行されないがエラーではないということである。

--
window.onload = function(){
  try{
    $timer = setTimeout("window.close()",3000);
  }catch($error){
    alert("error!");
  }finally{
    $timer = setTimeout("window.open('about:blank','_self')",3000);
  }
}
--

 まあ、セキュリティ上、JavaScriptで勝手にウインドウを閉じれない仕様に変化してきている訳だ。それでも抜け道はあるかもと試してみたが、親ウインドウと子ウインドウの関係は崩れないようで、子ウインドウから親ウインドウは閉じれず、実験は失敗。

 それよりも、<iframe></iframe>を非表示にして、プログラムを記述したファイルを流し込む方法があり、ガレコレのプログラムにも利用している。こっちの方がよっぽどセキュリティホールなのだが、これが出来ないとなると、裏方のプログラムがすべておじゃんになるので、あまり騒がないようにしている。

[検証プログラム]
・下記リンクをクリックした場合、ウインドウが閉じる。
・下記リンクをコピーして、アドレスに張り付けて開いた場合は、ブラウザによって、ウインドウが閉じない。
 
 iPhoneのSafariで、最下までスクロールすると、画面の下部に操作系のボタン群が現れます。

 これらを表示した直後、style="position:fixed;"により画面に固定したinputボタンが、押しても反応しなくなります。

 また、scrollに関しても、ブラウザによってまちまちで、一昔より悪くなっています。未だ過渡期なんですね。

 fixedとscrollにおいては、いつまで経っても、まともな仕様とブラウザが現れません。なので、プログラマーは、逐次ブラウザの状況をチェックして、独自に工夫して利用しています。

 画面に表示されているスクロールの最上部の位置を示すducument.body.scrollTopをサポートしているブラウザは、SafariとEdgeのみでした。代わりにwindow.pageYOffsetを使うよになっているようです。

--
ducument.body.scrollTop
 ↓変更
window.pageYOffset
--

 iPhoneのSafariに関しては、下記のJavaScriptを追記するだけで、問題が解決します。スクロールの最下部に位置したときに、トラブるのですが、その時点で、window.focus()することで、問題回避できました。ようは、命令を一つ噛ませれば良かったのです。

--
<script>
<!--

window.onscroll = function(){
  if(document.body.scrollHeight == window.innerHeight + window.pageYOffset){
    window.focus();
  }
}

// -->
</script>
--

 なお、AndroidのGoogle Chromeは、問題が発生しないことを確認しました。


P.S. 最初、噛ませる命令をscrollBy(0,0)していました。しつこい検証で、十中八九上手くいきますが、ダメな時もあることが分かりました。scrollBy(0,-1)では、操作系のボタン群の表示に少し支障をきたします。scrollBy(0,-0.1)もscrollBy(0,0)と同じでした。scrollBy(0,-1);scrollBy(0,1);では、もっとダメになりました。結局、scrollBy()を諦めました。

 Safariをバグフィクスしてほしいですね。
 
 三角を同じサイズになるように入力してみた。

Windows10のIMEで三角を入力
▲▲◀▶
△▽◁▷

iPhoneで三角を入力
▲▼◀︎▶︎
△▽◁▷

 WindowsでもiPhoneでも、同じ三角が入力できているようだ。しかし、Windowsでは横三角が小さめに表示されてしまう。相変わらず、雑なOSである。

 今回利用しようとした左向き黒三角は下記の通り。

▶︎ &#x25B6;
 
 年度の切り替えに伴うプログラミングで、缶詰め状態である。4月2日(月)に何とか間に合うとは思うが、花見をお断りするなど、精神的ダメージが大きい。

 さて、[JavaScript]も随分と進化して来ており、何が出来るようになったのかを逐次観察している。

 必要に迫られて、スマホでWi-Fi判別できるようになったか調べてみた。AndroidでGoogle Chromeは、以前からWi-Fi判別できている。iPhoneでSafariは、相変わらずできないようである。今回も、使えない。

--
navigator.connection

[Android]
// Case Wi-Fi Off
type: cellular

// Case Wi-Fi On
type: wifi
effectiveType: 4g
--

 ついでに、オブジェクトのリストを出力するプログラミングをリニューアルしてみた。
 
 <input type="date">と記述するだけで、カレンダーを表示してくれて、日付入力が簡単にできるようになる。送信されるデータは、"2017-11-03"と、1つに繋がった文字データである。

 Microsoft Edge, Google Chrome, Safari, Operaが対応している。IE11とFirefoxでは利用できない。

--
2017年11月3日(金) 6:30の場合

<input type="date">
→"2017-11-03"
<input type="month">
→"2017-11"
<input type="week">・・・Safari未対応
→"2017-W44"
<input type="time">
→"06:30"
<input type="datetime">・・・廃止
<input type="datetime-local">・・・dateに同じ
→"2017-11-03"
--

 カレンダーは、もちろん祝日は明示されていない。『子猫の手』の次期バージョンでは、ブログの日付入力に、カレンダー入力を装備する。当然、祝日入りである。

 なお、<input type="week">は不可解なので、使わないことにした。

 『2017年1月1日(日)』が『2016年第52週』となり、日本人である自分の感覚とは異なる。

 週の始まりが『日曜日』ではなく、『月曜日』となっている。週の由来はともかく、各規定でそうなっている。月曜日から働くからと考えられるが、日本の労働基準法では日→土になっているのが笑える。でも、歌の「Sunday, Monday, Tuesday/Days of the Week Song」では、日曜日からだよね。自分は、プログラミングで日曜日~土曜日:0~6が染みついているので、多少違和感がある。

--
ISO 8601
 月曜日~日曜日:1~7
JIS X 0301
 月曜日~日曜日:01~07
労働基準法
 週は、日曜日~土曜日
--

P.S. 改めて、ISO 8601で「2000年1月1日を土曜日とする」と定義されて、JIS X 0301がそれに従っている。

P.S.2 曜日の起源から考えると、実は第一番目は土曜日が自然なんだね。
 

お問い合わせ


by Network Communication Note