2015-10-07 3 views
0

Я поместил highchart gauge в html-файл и загружаю его в webview. Я сделал функцию set_needle(), которая устанавливает иглу в определенное значение. Но когда я пытаюсь загрузить вызов javascript этой функции в Java, ничего не происходит. Я посмотрел несколько примеров, и мне кажется, что я делаю то, что я есть, поэтому я не уверен, в чем проблема.Как вы называете функцию, определенную программистом, в javascript в веб-браузере Android?

Вот это HTML/JS:

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/highcharts-more.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
</head> 

<body> 
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div> 

<script type="text/javascript"> 

var needle_value = 0; 

function set_value(new_val) { 
    needle_value = new_val; 
    console.log("setting needle"); 
} 

$(function() { 

$('#container').highcharts({ 

    chart: { 
     type: 'gauge', 
     plotBackgroundColor: null, 
     plotBackgroundImage: null, 
     plotBorderWidth: 0, 
     plotShadow: false 
    }, 

    title: { 
     text: 'Activity Index - Last 24 Hour' 
    }, 

    pane: { 
     startAngle: -125, 
     endAngle: 125, 
     background: [{ 
      backgroundColor: { 
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, 
       stops: [ 
        [0, '#FFF'], 
        [1, '#333'] 
       ] 
      }, 
      borderWidth: 0, 
      outerRadius: '109%' 
     }, { 
      backgroundColor: { 
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, 
       stops: [ 
        [0, '#333'], 
        [1, '#FFF'] 
       ] 
      }, 
      borderWidth: 1, 
      outerRadius: '107%' 
     }, { 
      // default background 
     }, { 
      backgroundColor: '#DDD', 
      borderWidth: 0, 
      outerRadius: '105%', 
      innerRadius: '103%' 
     }] 
    }, 

    // the value axis 
    yAxis: { 
     min: 0, 
     max: 200, 

     minorTickInterval: 'auto', 
     minorTickWidth: 1, 
     minorTickLength: 0, 
     minorTickPosition: 'inside', 
     minorTickColor: '#666', 

     tickPixelInterval: 40, 
     tickWidth: 1, 
     tickPosition: 'inside', 
     tickLength: 14, 
     tickColor: '#666', 
     tickAmount: 11, 

     labels: { 
      step: 5, 
      rotation: 'auto', 
      format: '{value}%' 
     }, 
     title: { 
      text: 'Activity<br />Index', 
      style: {'fontSize':'11px'}, 
      y: 5 
     }, 
     plotBands: [{ 
      from: 0, 
      to: 60, 
      color: '#DF5353' // red 
     }, { 
      from: 60, 
      to: 80, 
      color: '#DDDF0D' // yellow 
     }, { 
      from: 80, 
      to: 120, 
      color: '#55BF3B' // green 
     }, 
     { 
      from: 120, 
      to: 140, 
      color: '#DDDF0D' // yellow 
     }, 
     { 
      from: 140, 
      to: 200, 
      color: '#DF5353' // red 
     }] 
    }, 
    credits: { 
     enabled: false 
    }, 
    exporting: { 
     enabled: false 
    }, 
    series: [{ 
     name: 'Activity Index', 
     data: [20], 
     tooltip: { 
      valueSuffix: '% of daily average' 
     } 
    }] 

}, 
// Add some life 
function (chart) { 
    if (!chart.renderer.forExport) { 
     setInterval(function() { 
      var point = chart.series[0].points[0]; 

      point.update(needle_value); 

     }, 3000); 
    } 
}); 
}); 
</script> 

А вот соответствующий код Java:

WebView myWebView = (WebView) findViewById(R.id.webview); 
    myWebView.setWebChromeClient(new WebChromeClient()); 
    WebSettings webSettings = myWebView.getSettings(); 
    webSettings.setJavaScriptEnabled(true); 
    webSettings.setDomStorageEnabled(true); 

    myWebView.loadUrl("file:///android_asset/SleepActivity.html"); 
    myWebView.loadUrl("javascript:set_value(50)"); 

ответ

0

Поскольку вы вызываете функцию JavaScript сразу после инструкции url загрузки html-страницы, возможно, страница не полностью загружена при попытке выполнить JavaScript, что приводит к ошибке.
Если это так, я предлагаю отложить инструкцию myWebView.loadUrl("javascript:set_value(50)"); на обратном вызове onPageFinished пользовательского WebViewClient. Что-то вроде:

myWebView.setWebViewClient(new WebViewClient(){ 
    @Override 
    public void onPageFinished(WebView view, String url) { 
     view.loadUrl("javascript:set_value(50)"); 
    } 
}); 
+0

Все было, спасибо! – user3281826

0

Вот интерфейс пример:

public class WebAppInterface { 
    Context mContext; 

    /** Instantiate the interface and set the context */ 
    WebAppInterface(Context c) { 
     mContext = c; 
    } 

    /** Show a toast from the web page */ 
    @JavascriptInterface 
    public void showToast(String toast) { 
     Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); 
    } 
} 

Hook его до WebView, как это:

webView.addJavascriptInterface(new WebAppInterface(this), "Android"); 

Android это название объектов JavaScript, так что вы можете вызвать его из JavaScript, как это:

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" /> 

<script type="text/javascript"> 
    function showAndroidToast(toast) { 
     Android.showToast(toast); 
    } 
</script> 

@JavascriptInterface аннотаций важно ; если у вас его нет, метод не может быть вызван из javascript.

Смежные вопросы