2017-01-20 5 views
0

私はCordovaを使用して開発したモバイルでは、リモートWebアプリケーションを開く方法があることを知りたいです。リモートWebアプリケーションでボタンをクリックすると、Cordova環境でJavaスクリプトが実行されますか?Cordovaを使用するwebview

例えば、私のモバイルアプリケーションは、WebビューでアプリケーションサーバーにホストされているWebページを開いて、ユーザーにライセンスを読んで承諾したことを知らせるように要求します。ユーザーは、Webページで「Accept」または「Not Accept」をクリックする必要があります。

ユーザーが「同意する」をクリックすると、モバイルアプリで別のページを表示してユーザーがモバイルアプリの使用を続行できるようにするためのjavascriptを実行したいと考えています。

これは可能ですか?

ありがとうございます!

答えて

3

第1に、正しく機能するためには、リモートサーバーに完全に依存しているモバイルアプリを持つことはお勧めできません。ユーザーのインターネット接続が途切れたり間欠的な場合はどうすればよいですか? (私が住んでいるところではそれはたくさん起こります)。

しかし、1つの解決策では、リモートWebアプリケーションコンテンツを読み込むためにiframeを使用し、cross-frame messagingを使用してリモートWebアプリケーションとのUI対話の結果をCordovaアプリケーションに返信します。リモートのWebアプリケーションURLを適切にホワイトリストする必要があります。

このような何か:

コルドバアプリのindex.htmlを

<html> 
    <head> 
     <script type="text/javascript" src="cordova.js"></script> 
     <script type="text/javascript"> 
      function onDeviceReady(){ 
       window.addEventListener("message", onFrameMessage, false); 
      } 

      function onFrameMessage(event){ 
       var eventName = event.data[0]; 
       if(eventName === "terms_result"){ 
        var accepted = event.data[1] == 1; // == will match 1 or "1" 
        if(accepted){ 
         // Do something - e.g. change to homepage 
        }else{ 
         // Do something else - e.g. display an error message 
        } 
       } 
      } 

      document.addEventListener("deviceready", onDeviceReady); 
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="terms"> 
      <iframe src="http://example.com/my/remote/webapp" style="border: 0; width: 100%; height: 100%"></iframe> 
     </div> 
     <div data-role="page" id="home"> 
      <!-- Your home page content --> 
     </div> 
    </body> 
</html> 

リモートWebアプリケーションのHTML

<html> 
    <head> 
     <script type="text/javascript"> 
      function accept(result){ 
       window.parent.postMessage(["terms_result", result], "*"); 
      } 
     </script> 
    </head> 
    <body> 
     <button onclick="accept(1)">Accept</button> 
     <button onclick="accept(0)">Not Accept</button> 
    </body> 
</html> 
関連する問題