自己回答です。
InAppBrowserプラグインを使用してブラウザを表示すると、DB参照先が
/data/data/パッケージ名/app_database
から
/data/data/パッケージ名/app_inAppBrowserDB
に変わってしまうため、"no such table"
が発生するようです。
table not found when coming back from in app browser link: Phonegap
カスタマイズしたCordovaプラグインを導入すれば解決しそうですが、BASICプランなのでそれ以外の方法を考えました。
起動時にhidden=yes
でブラウザを表示させ、数秒待ってブラウザを閉じた後にテーブルを作成します。
DB参照先がapp_inAppBrowserDB
に切り替わった後にテーブルを作成するため、以降は"no such table"
が発生せずに動作するようです。
書き直したコードを載せておきます。
<!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"]);
// index
app.controller("indexController", ["$scope", function($scope) {
$scope.ready = false;
ons.ready(function() {
var w = window.open("", "_blank", "location=no,hidden=yes");
console.log("open browser");
setTimeout(function() {
w.close();
console.log("close browser");
initData($scope);
}, 500);
});
$scope.$on("initData", function(e) {
$scope.ready = true;
$scope.$apply();
console.log("ready");
});
}]);
// page1
app.controller("page1Controller", ["$scope", function($scope) {
$scope.listTable = [];
// indexControllerのreadyを監視
$scope.$watch("ready", function(newVal, oldVal) {
if (newVal == true) {
getData($scope);
}
});
$scope.$on("getData", function(e, list) {
$scope.listTable = list;
$scope.$apply();
console.log("get data");
});
}]);
// page2
app.controller("page2Controller", ["$scope", function($scope) {
$scope.goUrl = function() {
window.open("http://ja.stackoverflow.com/", "_blank", "location=yes");
};
}]);
// DB初期化
function initData($scope) {
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 = "SELECT COUNT(*) AS rowcount";
sql += " FROM t_test";
t.executeSql(sql, [], function(t, r) {
console.log("reccount = " + r.rows.item(0).rowcount);
if (r.rows.item(0).rowcount == 0) {
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, "加藤"]);
console.log("insert data");
}
});
});
},
function(err) {
console.log(err.code + " " + err.message);
},
function() {
$scope.$emit("initData");
});
}
// 名簿データ取得
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
});
}
},
function(t, err) {
console.log(err.code + " " + err.message);
});
},
function(err) {
console.log(err.code + " " + err.message);
},
function() {
$scope.$emit("getData", list);
});
}
</script>
</head>
<body ng-controller="indexController">
<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>