【iOS】UIWebViewからJavaScriptを実行して要素を擬似的にクリックする

iOS Objective-C

そんな感じのことできないのかなーと思ってみたらできるっぽいので備忘録でメモしておきまっす

今回はbxsliderという機能を使ってスライダーというか、ページ内でjavascriptでviewを切り替えるような処理をiOS側からできるようにしてみます。

例えば、以下のようにidを各要素に振っておきます。

<ul id="pager">
  <li class="ethiopia"><a id="ethiopia" data-slide-index="0"><span class="hidden">エチオピア</span></a></li>
  <li class="kenya"><a id="kenya" data-slide-index="1"><span class="hidden">ケニヤ</span></a></li>
  <li class="brazil"><a id="brazil" data-slide-index="2"><span class="hidden">ブラジル</span></a></li>
  <li class="costarica"><a id="costarica" data-slide-index="3"><span class="hidden">コスタリカ</span></a></li>
</ul>

次に、以下のようなjsの関数を用意します。

<!-- iOSからjQueryを発火するための関数 -->
<script>
// iOSから対応する引数をもってくる
function click_pager(pager_value) {
  var pager = document.getElementById(pager_value);
  if (pager_value != NULL && pager_value != '') {
    pager.click();  
  }
}
</script>

このclick_pager関数をiOSから呼び出して、そのときに渡す引数によってクリックする要素を切り替えるようにしてます。

そしてiOS側からUIWebViewクラスのstringByEvaluatingJavaScriptFromStringを呼び出せば、JSの関数を実行できます。このときの引数を、html内のクリックしたいid名と一致させます。

[self.webView stringByEvaluatingJavaScriptFromString:@"click_pager('ethiopia');"];

おもしろかった！もっといい方法があるのかもしれない。

参考サイト

http://qiita.com/ozw_sei/items/62d9cd1938cf6ea012bd

http://www.fkmsoft.jp/blog/software/ios/uikit/uiwebview_js_1.html

  • レスポンシブデザインに対応した多機能スライダー[bxslider]

http://www.creators-gate.net/blogs/bxslider

http://tmlife.net/programming/javascript/javascript-comparison-operation.html