SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

attachEvent 関数をスマホで動作させるには？

目次

業務システムがiPadで見れない！?

社内業務システムなどIEをターゲットとしたWebサイトをスマホで見ると、JavaScriptエラーが発生してサイトが正しく動作しないことがあります。PCの場合なら「IEを互換モードで使用する」といった回避策がありますが、AndroidやiPhone/iPadの場合はそもそもIEが利用できません。そのため、利用者側だけで対応することはできず、少なからずWebサイト側での対応が必要になります。

問題はIE独自関数の使用

このケースでよくある原因がJavaScriptのattachEvent関数です。この関数はaddEventListener関数の代替として、長らくIE向けサイトで使用されてきましたが、今やEdgeやIE11ではサポートされていません。IE独自関数なので、当然iOSやAndroidでもサポートしていない。だからattachEvent関数のみを使って構築したサイトはスマートフォンやiPadでは動作しないのです。

attachevent-error

２つの対応方法

さて、attachEvent関数への対処ですが、JavaScriptコードを変更してaddEventListener関数を呼び出すようにする方法が１つ。

具体的にはaddEventListenerに対応しているブラウザにはaddEventListener関数を使用し、対応していない場合はattachEvent関数を使用します。以下の例ではマルチデバイスに対応した関数を定義しています。

【変更前】

window.attachEvent(‘onload’, function() {
	...
});

【変更後】

function addEvent(obj, event, func) {
	if (obj.addEventListener) {
		obj.addEventListener(event, func);
	} else {
		obj.attachEvent('on'+event, func);
	}
}
addEvent(window, ‘load’, function() {
	...
});

もう一つは、JavaScriptコードは変更せず、HTMLに以下のスクリプトをheadの先頭に追加する方法です。これはattachEvent関数が使えないなら独自に定義してしまおう、というアプローチです。

【追加コード】

<script>
	Window.prototype.attachEvent = function(e,f) {
		e = e.replace(/^(on)/, "");
		this.addEventListener(e, f);
	};
</script>

このコードにより、attachEvent関数が動作するようになるので、既存のJavaScriptコードに一切手を入れる必要がありません。

前者の方法は対象箇所が少ない場合に手っ取り早いでしょう。また、後者の方法はジーンコードのようなWeb変換システムを使えば、サイト全体へ一括でタグを追加できます。

まとめ

もともとマルチデバイスに対応していないWebサイトをスマホ対応する場合、HTMLやCSSなどのデザイン面だけではなく、JavaScriptによる機能面にも注目です。スマホやタブレット向けにJavaScriptの動作をカスタマイズするための手段は取れるのか、検討しておくとよいでしょう。

シンメトリックでは、ブレイクポイントの設定不要でレスポンシブと同様のマルチデバイス対応を実現する「ジーンコード」を提供しています。
スマホ中心のサイト制作、リニューアルをお考えでしたら、ぜひ使ってみてください。

参考：

シンメトリックのブログ

Page Top