onResize - サイズ変更スクリプト

ブラウザの幅または高さが変更されたときに JavaScript コードをアクティブにします。

カテゴリ

イベント

構文

<xp:eventHandler event="onResize" attributes>content</xp:eventHandler>

使用法

設計モードで、[すべてのプロパティ] をクリックし、[events] カテゴリの [onResize] を探します。

このイベントを使用すると、幅や高さの寸法が、現在、縦長の比率であるか横長の比率であるかが分かります。

シングルページアプリケーションコントロールで使用できます。

注: このイベントはリリース 9.0.1 で新しく追加されました。

モバイルアプリケーションでは多くの場合、onResize イベントを onOrientationChange イベントと共に使用して、ユーザーがデバイスを回転するときにレイアウトが変更されるようにします。ウィンドウオブジェクトを調べると、幅や高さが分かります。テストの目的では、ユーザーが Web ブラウザウィンドウをサイズ変更した場合に、デスクトップブラウザで onResize イベントも起動されるかどうかに注目することが有効です。

例

<xe:singlePageApp>
	<xp:eventHandler event="onResize" submit="false">
		<xe:this.script><![CDATA[console.log("onResize "
    +"innerWidth:"+window.innerWidth+" innerHeight:"+window.innerHeight);]]&gt;</xe:this.script>
	</xp:eventHandler>
</xe:singlePageApp>