JavaScriptのお時間だ！！！
JavaScriptは基本外部に置きたいよね(素人)
説明するときはhtmlに直接書いた方がいいと思う
まずはhtmlを用意
window.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- JQueryの読み込み(CDN) -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<title> Window </title>
</head>
<body>
<div id="windowclose">
ここにマウスを置くとウィンドウが閉じます
</div>
</body>
</html>
続いてJavascriptの用意
ウィンドウを閉じる処理を書きます
ほぼJQueryです。
ファイル名:window_close.js
※window.htmlが置いてあるところに「js」っていうフォルダを作ってそこの中に置こう。
※↓こんな感じ
- window.html
- js
- window_close.js
window_close.js
$(function(){
var close = $('#windowclose');
close.on('mouseover', function(){ //clickにするのもアリ
window.open('about:blank','_self').close();
//IE以外(chromeなど)はこう書かないとすんなり閉じてくれない
//きっとwindow.close()を使わせないフレンズなんだね
//IEもこう書くとアラートなしで閉じてくれる
});
});
合体、ダーッ！
window.htmlにwindow_close.jsを読み込ませる
window.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- JQueryの読み込み(CDN) -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/windowclose.js"></script>
<title> Window </title>
<!-- 省略 -->
完成。
まとめ
今回はhtmlファイル、jsファイル共に1つで説明しました。分かりやすかったでしょうか。
実際に私がこの機能を利用した時は、「大本のページが別にありそこの処理で新しくウィンドウを開きそれを閉じるため」という動きでした。
mouseoverやclick等を使わなくても処理が終わったら自動的に閉じることもできるんだろうな...というより、よく見かけますよね。
開いたと思ったらすぐ閉じる的なヤツ。ただの強制終了とか言わない
まだまだド素人なのでこれからも頑張ります。