Monaca InAppBrowserプラグインでWebView表示後、Web SQLで「no such table」エラーが発生する
MonacaでWeb SQLを使用したアプリを開発しましたが、Androidにおいて次の現象が解決できません。
※Cordova InAppBrowserプラグイン有効。
※Monacaデバッガー、リリースビルドで現象を確認。
下記の例を起動すると、page1で10件分のリストが表示されます。
page2に切り替え、「stackoverflow」ボタンをタップするとWebViewが表示されます。
「×」ボタンまたは「戻る」ボタンをタップして閉じ、page1に切り替えると、エラーコード:5 メッセージ:"no such table: t_test"が発生します。
実際は、Dropbox datastore APIの認証でWebViewを使用しています。
ログイン画面で「×」ボタンまたは「戻る」ボタンをタップして閉じ、一覧などの表示画面に切り替えると上記エラーが発生します。
※API内のwindow.openで"_blank"以外は認証に失敗します。
また、appC cloudプラグインでもカットイン広告の画面遷移にWebViewを使用しており、「戻る」ボタンで戻ると同様のエラーが発生するため、導入を断念しました。
作りが悪いのか、諦めるしかないのか、ご教示のほどよろしくお願いします。
関連した内容と思われるリンク
1.inAppbrowser and webSql failure
2.Apache Cordova
<!DOCTYPE HTML>
<html la="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<script>
var app = ons.bootstrap("myApp", ["onsen"]);
// DB初期化
initData();
// page1
app.controller("page1Controller", ["$scope", function($scope) {
ons.ready(function() {
$scope.listTable = [];
getData($scope);
});
}]);
// page2
app.controller("page2Controller", ["$scope", function($scope) {
$scope.goUrl = function() {
window.open("http://ja.stackoverflow.com/", "_blank", "location=yes");
};
}]);
// DB初期化
function initData() {
var sql = null;
var db = window.openDatabase("testdb", "1.0", "testdb", 1024 * 1024);
db.transaction(function(t) {
sql = "CREATE TABLE IF NOT EXISTS t_test (";
sql += " id INTEGER,";
sql += " name TEXT)";
t.executeSql(sql, [], function(t) {
sql = "DELETE FROM t_test";
t.executeSql(sql, []);
sql = "INSERT INTO t_test (id, name) VALUES(?, ?)";
t.executeSql(sql, [1, "佐藤"]);
t.executeSql(sql, [2, "鈴木"]);
t.executeSql(sql, [3, "高橋"]);
t.executeSql(sql, [4, "田中"]);
t.executeSql(sql, [5, "伊藤"]);
t.executeSql(sql, [6, "山本"]);
t.executeSql(sql, [7, "渡辺"]);
t.executeSql(sql, [8, "中村"]);
t.executeSql(sql, [9, "小林"]);
t.executeSql(sql, [10, "加藤"]);
});
});
}
// 名簿データ取得
function getData($scope) {
var sql = null;
var list = [];
var db = window.openDatabase("testdb", "1.0", "testdb", 1024 * 1024);
db.transaction(function(t) {
sql = "SELECT *";
sql += " FROM t_test";
sql += " ORDER BY id";
t.executeSql(sql, [], function(t, r) {
for (i = 0; i < r.rows.length; i++) {
list.push({
id: r.rows.item(i).id,
name: r.rows.item(i).name
});
}
$scope.listTable = list;
$scope.$apply();
},
function(t, err) {
console.log(err.code + " " + err.message);
});
});
}
</script>
</head>
<body>
<ons-template id="page1.html">
<ons-page ng-controller="page1Controller">
<ons-toolbar fixed-style>
<div class="center">Page1</div>
</ons-toolbar>
<ons-list>
<ons-list-header>
名簿
</ons-list-header>
<ons-list-item ng-repeat="item in listTable">
<ons-row>
<ons-col width="20%">
{{item.id}}
</ons-col>
<ons-col width="80%">
{{item.name}}
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page ng-controller="page2Controller">
<ons-toolbar fixed-style>
<div class="center">Page2</div>
</ons-toolbar>
<br>
<div style="text-align: center;">
<ons-button ng-click="goUrl()">stackoverflow</ons-button>
</div>
</ons-page>
</ons-template>
<ons-tabbar>
<ons-tab page="page1.html" label="Page1" icon="ion-home" active="true"></ons-tab>
<ons-tab page="page2.html" label="Page2" icon="ion-earth"></ons-tab>
</ons-tabbar>
</body>
</html>