2012-07-11 2 views
0

안녕하세요 Stackoverflow!Android WebView에서 Javascript 위젯 표시

JavaScript 위젯을 표시하기 위해 WebView를 사용하는 응용 프로그램을 만들려고하고 있지만 위젯을 전혀 표시 할 수없는 벽에 부딪혔습니다. 나는 상당한 양의 연구를 수행했으며, 내가하려는 것은 가능하다고 생각합니다.

이 내 주요 활동

public class WebViewAppTestActivity extends Activity { 
/** Called when the activity is first created. */ 
@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main); 

    //grab the webview 
    WebView webview = (WebView) findViewById(R.id.webview); 

    //grab the webview settings 
    WebSettings websettings = webview.getSettings(); 

    //enable javascript 
    websettings.setJavaScriptEnabled(true); 

    //add a js interface to display the widgets 
    webview.addJavascriptInterface(new JavaScriptInterface(this), "Android"); 

    //load a webpage 
    webview.loadUrl("file:///android_asset/javascript/index.html"); 


} 

}

그것은 내가 (내 응용 프로그램을 테스트 할 때 표시되는이

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width; user-scalable=0;" /> 
<title>WebView test!</title> 
</head> 
<body> 
<h1>MyHTML</h1> 

<div id="panel"> 
<section class="episode"></section> 
</div> 

<script src="https://sourceurl1.js" /> 
<script src="https://sourceurl2.js" /> 
<script src="https://sourceurl3.js" /> 
<script src="https://sourceurl4.js" /> 

<script src="./widget.js" /> 
<script src="./top-episodes.js" /> 
<script> 
    var TopEpisodes = new Company.TopEpisodes({ 
    $element: $('#panel section.episodes') 
    }); 
    TopEpisodes.init({ 
      mode      : 'realtime', 
     range     : { from: 1341911040, to: 1341907200 }, 
     path      : ["4FB159EB613033AA710006DF"], 
     isEpisode : true 
    }); 
</script> 
</html> 

</body> 
</html> 

있는 유일한 방법처럼 보이는 index.html 파일을로드입니다 Nexus S 4G ICS 4.0.4)는 빈 흰색 화면의 MyHTML 헤더입니다. xml에서 인터넷 액세스를 사용할 수 있습니다.

WebView 설정을 사용하려면 다른 것이 있습니까? 아니면 HTML 파일에 문제가 있습니까? JS 인터페이스 내에서 addJavaScriptInterface 메소드로 뭔가를해야합니까?

어쨌든 나는 매우 붙어있어 어떤 제안이라도 열려있다! 시간 내 주셔서 감사합니다!

EDIT이 질문에 대한 몇 일간의 답변이 없으므로이 질문이나 도움이되는 다른 세부 정보를 명확하게하기 위해 할 수있는 일이 있는지 알려 주시기 바랍니다. 아니면 심지어 가능하다면. 고맙습니다! 귀하의 HTML이 잘못

+0

"file : /// ..."과 같이 로컬에서 JS 로딩 HTML 파일을 실행할 수 있습니까? 일반적으로 보안 제한은 없습니다 (Chrome 참조). – Fabio

+0

HTML을로드 할 수있게되었습니다. Android Developers 웹 사이트의 WebViews 샘플에서 아이디어를 얻었습니다. 귀하의 회신에 감사드립니다! 내 대답을 보라. – VinC

답변

0

그래서 난을 가기로 결정 한 파일의 위치를 ​​지정하려면 HTML과 Javascript 모두에 대한 경험 부족으로 인해 내 응용 프로그램과 다른 방향입니다.

대신이 차트 라이브러리를 사용하여 Java에서 위젯을 개발하려고합니다 : http://achartengine.org/ 그리고이 솔루션을 더 쉽고 빠르다고 생각하기 때문에 Javascript의 WebView 내에서 생성하지 않고 HttpClient를 사용하여 데이터를 업데이트하십시오. Android 애플리케이션 용.

감사합니다.

2

, <script src="<location of js>" /> 귀하가 제대로 위치를 가리키는되지

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width; user-scalable=0;" /> 
<title>WebView test!</title> 
</head> 
<body> 
<h1>MyHTML</h1> 

<div id="panel"> 
<section class="episode"></section> 
</div> 
<!-- Below is the code if the js in the same location of your index.html file. --> 
<script src="sourceurl1.js" /> 
<script src="sourceurl2.js" /> 
<script src="sourceurl3.js" /> 
<script src="sourceurl4.js" /> 

<!-- Below is the code if the js is outside the location of your index.html file. --> 
<script src="../widget.js" /> 

<!-- Below is the code if the js is outside the location of your index.html file., inside folder js--> 
<script src="../js/top-episodes.js" /> 
<script> 
    var TopEpisodes = new Company.TopEpisodes({ 
    $element: $('#panel section.episodes') 
    }); 
    TopEpisodes.init({ 
     mode  : 'realtime', 
     range  : { from: 1341911040, to: 1341907200 }, 
     path  : ["4FB159EB613033AA710006DF"], 
     isEpisode : true 
    }); 
</script> 
</html> 

이 더 도움말

+1

도움 주셔서 감사합니다! 나는 다른 방향으로 가려고 결심했다. (대답 참조). – VinC

관련 문제