0
Thumbsup

いい質問だ

0

Thumbsdown

うーん

webViewでeventが盗まれる

xsota
xsota 0

投稿日:2015-07-14 12:25:58

Titanium SDK 3.5.1

iOS上のwebViewiでOSのSafariのように、swipeで戻りたい。

<Alloy>
  <Window id="window" class="container">
    <View id="wrap">
      <WebView id="webView">
      </WebView>
    </View>
  </Window>
</Alloy>
$.window.open();

$.webView.url = "http://support.titanium-mobile.jp/";

$.wrap.addEventListener('swipe',function(e){

    if (e.direction == 'right') {
      $.webView.goBack();
      Ti.API.info("もどる");
   } 

});

上記のコードで実行すると、swipeは発火するが、webView上でclickやscrollができなくなってしまう。

どうすればよいのでしょうか。



回答

yagi_
yagi_
2540
Tcad_icon Tcmd_icon Tce_icon

Thumbsup

いい回答

0

Thumbsdown

うーん

UIWebViewのイベントは基本的にUIWebView内部で処理されてしまう(例えばリンクのタッチイベントもどう処理するかはUIWebViewの実装次第になる)ので、swipeが必要な場合はWebView内部のHTML自体に持たせる方がいいですね。

アプリ内に用意したHTMLを表示している場合はそのまま動作しますが、WebViewに表示させる内容がサーバ上にあり、自分の用意したコンテンツであれば(外部のHTMLを表示してしまう危険がなければ)、モジュールを使ってTitanium側のイベントを呼び出すことができます。

https://github.com/ryugoo/TiExtendWeb

これにhammer.jsを組み合わせると

<head>
  <script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
</head>
<body>
...
  <script>
    var body = document.body;
    var mc = new Hammer(body);
    mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
    mc.on('panleft panright', function(ev){
      //Ti.App.fireEvent("custom:event", {type: ev.type});これは動作しない
      window.location.href="extendwebview://customEvent/ev.type";
    });
  </script>
</body>

アプリ側は

Ti.App.addEventListener('customEvent', function(e){
  alert(e.path);
});

これでいける、んじゃないかなあ…


yagi_
yagi_
2540
Tcad_icon Tcmd_icon Tce_icon

Thumbsup

いい回答

0

Thumbsdown

うーん

  // app/assets/swipe.js
  var startX, endX, distance;
  window.addEventListener('touchstart', function(e){
    if(e.changedTouches){
      if(e.target.tagName != "TEXTARE"){
        e.preventDefault();
      }
      startX = parseInt(e.changedTouches[0].clientX, 10);
    }
    return true;
  });

  window.addEventListener('touchend', function(e){
    if(e.changedTouches){
      endX = parseInt(e.changedTouches[0].clientX, 10);
      distance = Math.abs(endX - startX);
      if(distance > 100){
        if(endX > startX){
          //direction == right
          if(e.target.tagName != "TEXTARE"){
            e.preventDefault();
          }
          history.back();
        }
      }
      return true;
    }
  });

/*
 ↑ これをapp/assets/以下に置いて、↓ これでSwipeを取れるようになってきました。touchstartとendがいまいちな感じなので改良すれば使えるかな…
*/
// app/controllers/index.js
$.webview.addEventListener('load', function(){ 
  var jsString = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory + "swipe.js").read().toString();
  Ti.API.info(jsString);
  $.webview.evalJS('(function(){' + jsString + '})();');
});


xsota
xsota
0

Thumbsup

いい回答

0

Thumbsdown

うーん

<Alloy>
  <Window id="window" class="container">
    <ScrollView id="scrollView" height="auto" contentHeight='auto' contentWidth="Ti.UI.FILL">
      <WebView id="webView">
      </WebView>
    </ScrollView>
  </Window>
</Alloy>
$.window.open();

$.webView.url = "http://blog.xsota.com/";

$.scrollView.addEventListener('swipe', function (e) {
  Ti.API.info('swipe');
});

$.webView.addEventListener("load", function (e) {
  $.webView.height = Ti.UI.SIZE;
  $.webView.width = "auto";
});

こうするとswipeとwebviewのスクロールはできるんですけど、webViewのクリックが効きません。eventを子viewに伝えることは可能ですか。

fireEventとかでできるんですかね。


ログインすると回答することができます。