2015-08-31 61 views
0

現在我將繼續在webview中顯示條形圖,並在下面的代碼的幫助下顯示條形圖。如何從Android中調用JavaScript函數

public class sample extends Activity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     final WebView webview = (WebView)this.findViewById(R.id.webView); 
     WebSettings webSettings = webview.getSettings(); 

     webSettings.setJavaScriptEnabled(true); 
     webSettings.setBuiltInZoomControls(true); 
     webview.requestFocusFromTouch(); 

     webview.setWebChromeClient(new WebChromeClient()); 
     webview.setWebViewClient(new WebViewClient() 
     { 

      public void onPageFinished(WebView view, String url) 
      { 
        String str = "john"; 
       webview.loadUrl("javascript:callFromActivity('"+str+"')"); 

      } 
     } 
      ); 

     webview.loadUrl("file:///android_asset/mypage.html"); 
    } 



} 

其實我必須從Android通過某些值的JavaScript ,並顯示在圖表的那些值(例如:在條形圖我需要顯示在圖表的不同的用戶名這是我從Android的類獲得的那些值到js)。 follwed鏈接通過從Android的價值,JS:http://android-er.blogspot.in/2011/10/call-javascript-inside-webview-from.html

js文件:

<html> 

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

<script> 
var name=null; 

function callFromActivity(s) { 
name = document.getElementById("mytext").innerHTML = s; 
alert(name); 

} 


google.load('visualization', '1.1', {packages: ['corechart', 'bar']}); 

google.setOnLoadCallback(drawStacked); 
function drawStacked() { 

alert(name); 
console.log(name); 
    var data = google.visualization.arrayToDataTable([ 
      ['USER', 'NAME', 'COUNT', 'POSITION'], 
      ['USER1', name, 1, 1], 
      ['USER2', name, 1, 2] 


     ]); 

     var options = { 


    is3D: true, title: 'INVOICE', 
     width: 1200, 
     height: 240, 
     legend: { position: 'top'}, 
     bar: { groupWidth: '50%' }, 
     isStacked: true, 
     }; 

     var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 

    } 
</script> 
<body > 
<div id="chart_div"></div> 
<p id="mytext">Hello!</p> 
</body> 
</html> 

我的問題:

callFromActivity函數獲取的價值,但如果我把它傳遞給drawStacked它顯示爲undefiened。

如何解決這個問題,如果有任何替代請幫我解決這個問題。

回答

1

你在你的webview中註冊一個JS接口。一個JS接口的例子是這樣的

public class JsExampleInterface 
    { 

    private Context mContext; 

    public JsExampleInterface(Context context) 
    { 
     this.mContext = context; 
    } 

    /** 
    * Returns all the Device info 
    * @return DeviceInfo object 
    */ 
    @JavascriptInterface 
    public String getDeviceInfo() 
    { 
     DeviceInfo deviceInfo = new DeviceInfo(); 
     deviceInfo.setSdk(Build.VERSION.SDK_INT); 
     deviceInfo.setDevice(Build.DEVICE); 
     deviceInfo.setModel(Build.MODEL); 
     deviceInfo.setProduct(Build.PRODUCT); 
     deviceInfo.setManufacturer(Build.MANUFACTURER); 
     return mGson.toJson(deviceInfo); 
    } 
} 

然後到你的的onCreate方法,你必須註冊這個接口這樣

JsExampleInterface exampleInterface = new JsExampleInterface(this); 
mWebView.addJavascriptInterface(exampleInterface, "ExampleInterface"); 

之後,你就可以使用這個js接口到HTML像這樣:

// This returns a JSON object with all device info 
ExampleInterface.getDeviceInfo() 
+0

可以請你分享我的任何鏈接或教程的內容 – Vicky

+0

笏是指由SmafInterface – Vicky

+0

@Vicky抱歉ExampleInterface我的意思是。 –