Question

嘿，有Stackoverflow！

我正在尝试创建一个使用WebView来显示JavaScript小部件的应用程序，但我似乎遇到了一个无法让小部件显示的墙。我做了大量的研究，我认为我想做的事情是可能的。

这是我的主要活动

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");


}

}

它加载文件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>

我测试应用程序时显示的唯一内容（Nexus S 4G ICS 4.0.4）是空白屏幕上的MyHTML标题。在xml中启用了Internet访问。

我是否需要为WebView设置启用其他内容，或者我的HTML文件出现了什么问题？我是否需要在JS接口中使用addJavaScriptInterface方法做一些事情？

无论如何，我非常坚持并且对任何建议持开放态度！谢谢你的时间！

编辑几天内对此问题没有任何回复，请告诉我是否有什么可以澄清这个问题或任何其他有用的细节！或者，如果它是可能的。谢谢！

Answer 1

您的HTML错误，<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>

要为您提供更多帮助，请指定文件的位置

Answer 2

因为我缺乏HTML和Javascript的经验，所以我决定对我的应用程序采取不同的方向。

我将使用此图表库本地在Java中开发小部件：http://achartengine.org/然后使用HttpClient更新数据，而不是在Javascript中的WebView中创建它，因为我认为此解决方案将是Android应用程序更容易，更快捷。

谢谢大家的时间！

在Android WebView中显示Javascript小部件

2 个答案: