如何在Android webview中将JSON传递给AngularJS？

Question

如何在Android webview中将JSON传递给AngularJS？

Mar*_*ewd 4 android json webview angularjs

我正在尝试使用Android Webview来显示一些"活动"内容(根据某些输入设置而变化的图像集).内容将是本地(离线).

我想使用Angular.js来控制将在页面上显示的媒体.

那么,对于这个问题......我的Angular应用程序如何在启动时接收JSON数据？我看到的问题是,web视图不允许的角度来延迟加载其他文件(我已经遇到了这个试图使用HTML模板自定义指令.这需要封闭HTML模板到一个HTML文件).

我的Android活动可以在某处写出选项,但Angular如何能够读取它们？换句话说,有没有办法绕过webview的安全设置,不允许Angular.js延迟加载其他文件？

Answer 1

Mar*_*ewd 5

我想我已经把这个想出来了.我意识到我可以在我的Android Java代码中创建一个暴露给JavaScript的方法(通过@JavascriptInterface).这将允许我从我的AngularJS应用程序调用此方法以获取字符串中的JSON(有关JavascriptInterface的信息,请参阅此链接:http://developer.android.com/guide/webapps/webview.html).一旦我证明这是有效的,我会发布一些代码.

这是代码.它很棒.

MainActivity.java

public class MainActivity extends Activity {
    private String MY_JSON_EXAMPLE = "{\"name\":\"John Doe\",\"email\":\"jdoe@testco.com\"}";

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

        WebView wv = (WebView) findViewById(R.id.myWebView);
        wv.getSettings().setJavaScriptEnabled(true);
        wv.addJavascriptInterface(this, "AndroidMainAct");
        wv.loadUrl("file:///android_asset/mypage.html");
    }

    @JavascriptInterface
    public String getMyJSONData() {
        return MY_JSON_EXAMPLE;
    }
}

Run Code Online (Sandbox Code Playgroud)

的mypage.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Hello World, AngularJS</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <h3>Load Test</h3>
    <div ng-controller="MyController">
        <div id="dataWaiting" ng-show="!myData.length">
            Loading JSON...
        </div>
        <div id="dataLoaded" ng-show="myData.length">
            Data Loaded: {{myData}}
        </div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

app.js

var myApp=angular.module('myApp',[]);

myApp.controller('MyController', ['$scope', function($scope) {
    $scope.myData = '';

    this.loadData = function() {
        // get the data from android
        return AndroidMainAct.getMyJSONData();
    };

    $scope.myData = this.loadData(); // load data on instantiation
}]);

Run Code Online (Sandbox Code Playgroud)

通过android JavascriptInterface方法公开数据效果很好.

归档时间：	11 年，9 月前
查看次数：	3377 次
最近记录：	11 年前