The sky is the limit

ハイブリッドアプリ開発、PWAなど効率の良いiOSアプリ、Androidアプリ開発の情報を共有したい。アプリ開発は楽しい。【PWA、AngularJS、Monaca、Cordova、OnsenUI】

【iOS】document.getElementById('hogehoge').click()が正しく動かなかった件【clickイベント】

【iOS】document.getElementById('hogehoge').click()が正しく動かなかった件【clickイベント】

f:id:duo-taro100:20160218004611p:plain


<環境>
OnsenUI 2.0
AngularJS 1.5

現在いるタブのとあるボタンを押下すると、他のタブに遷移するという実装が必要だった。
最初は遷移したいタブにid="hogehoge"を付与して、javascriptで

	var tab = document.getElementById('hogehoge');
	tab.click();

で実装していた。
monacaのクラウドide上では正常に動作したので問題ないと思っていたら、monacaデバッガーを入れたiphoneでは動かなかった。(押しても何も起きない)

ons-tabbarのsetActiveTabを使用する

OnsenUIのを利用していたので、組み込み、メソッドを使うことで解決。
最初からそうしろってはなしだけど。

	var transitionTab = function(){
	    // tabbarを取得
	    var tabbar = document.querySelector("ons-tabbar");
	    // activeなタブを変更
	    tabbar.setActiveTab(3);
	}

遷移前の画面上で、ボタンを押したらこの関数を呼び出すようにした。
注意点としては、setActiveTabの引数のindexは「0」から始まること。
一番最初のタブに遷移したい時は

setActiveTab(0);

とすること。

iOSでこのような事象が生じた原因は追求してない。


(参考)
www.htmlhifive.com

qiita.com

qiita.com