デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.unload( )ページから離れる時の処理を設定

構文

ページから離れる時の処理を設定返値:jQueryオブジェクト
jQo.unload( function )ver1.0〜
jQo.unload( object, function )ver1.4.3〜
※v1.8で非推奨となりました

機能

セレクタにwindowを指定することでページから離れる時(ウインドウを閉じたり、別のページに移動したり、リロードしたりした時)に引数のfunctionを実行します。

ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます(データはイベントオブジェクトのdataプロパティ経由で渡されます)。

unloadメソッドはloadメソッド同様にブラウザなど環境によって動作が異なります。例えばchromeではページを閉じる時にイベントが発生しません。完璧な処理を求めるならjavaScriptでブラウザごとに個別対応(beforeunloadとか)するようにしましょう。

そのためunloadメソッドは非推奨となっています。→参考:本家ページの非推奨(deprecated)カテゴリ

解説

ページから離れる時に実行する処理を設定

サンプル(unload/01.html)を開いてbody内にa要素でリンクが設定されているのを確認してください。jQueryは以下の様に記述され、unloadメソッドの引数にfunctionの「unloadFunc」が設定されています。セレクタにはwindowを設定します。

$(function () {
	$(window).unload(unloadFunc);
});

unloadメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(イベントオブジェクト)を受け取ります。そしてページから離れる時に実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

unloadに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
 ページから離れる時に実行したい処理
}

サンプルunload/01.htmlで利用したunloadFuncは以下の様になっており、アラートで「unload!」と表示するだけです。

function unloadFunc(eo) {
	alert("unload!");
};
結果として、リンクをクリックしてページから離れるとアラートで「unload!」と表示します。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル(unload/01b.html

$(window).unload(function (eo) {
	alert("unload!");
});

objectオブジェクトをfunctionに渡す

第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。データはイベントオブジェクトのdataプロパティを介して渡されます。サンプル(unload/02.html)を開いてbody内の構成はunload/01.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、unloadメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。受け取った値はアラートで表示します。

$(window).unload({test:10}, function (eo) {
	alert(eo.data.test);
});

結果として、リンクをクリックしてページから離れるとアラートで第1引数で渡されたtestプロパティの値「10」を表示します。

メモ

unloadメソッドはfunction内でpreventDefaultメソッドを利用して、ブラウザ本来の機能を停止することはできません(もし可能なら、そのページから離れられないブラクラのようなコンテンツになってしまいます)。