MONACAアプリ内部のHTMLへのアクセス
MONACAアプリでHTMLファイルをダウンロードして
(場所はcdvfile://localhost/persistent/test.html
とします。)
上記のファイルをInAppBrowerで開きたいのですが、
アドレスをどのように設定すればよいのでしょうか?
ダウンロードしたファイル名(iFunBoxではmonaca/Documents)の一覧が表示されています
それをクリックすることでブラウザを開く予定です
function readFileで開く予定です
<!DOCTYPE HTML>
<html>
<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">
<link rel="stylesheet" href="css/style.css">
<script>
var directoryEntry;
document.addEventListener('deviceready', init, false);
function init() {
//window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, getFilesFromDirectory, fail);
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, getFilesFromDirectory, fail);
document.getElementById('download').addEventListener('click', downloadFile, false);
}
function getFilesFromDirectory(fileSystem) {
//directoryEntry =cordova.file.documentsDirectory;
//directoryEntry = 'cdvfile://localhost/persistent/path/to/';
directoryEntry = 'cdvfile://localhost/persistent/';
//directoryEntry2 = '/path/to/';
directoryEntry2 =fileSystem.root;
//alert(directoryEntry2);
var directoryReader = directoryEntry2.createReader();
directoryReader.readEntries(putFileName, fail);
//window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, getFilesFromDirectory, fail);
}
function putFileName(entries) {
//alert(entries.length);
for ( index = 0; index < entries.length; index++ ) {
//alert(entries[index].fullPath);
if ( entries[index].isFile ) {
var listItem = document.createElement('li');
listItem.textContent = entries[index].name;
listItem.title = entries[index].fullPath;
//listItem.addEventListener('click', uploadFile, false);
listItem.addEventListener('click', viewFile, false);
document.getElementById('fileList').appendChild(listItem);
}
}
}
function downloadFile() {
// FileTransferオブジェクトを作成
var fileTransfer = new FileTransfer();
// ダウンロード先のURIをencodeURIでエンコード
//alert(cordova.file.applicationDirectory);
var uri = encodeURI('http://image.gihyo.co.jp/assets/templates/gihyojp2007/image/gihyojp_logo.png');
//alert(uri);
// 保存するファイルの名前
//alert(time);
var fileName = 'gihyojp_logo2.png';
// 保存先をフルパスで指定
//var path = directoryEntry.fullPath + '/' + fileName ;
//var path = cordova.file.documentsDirectory + fileName ;
var path = directoryEntry + fileName;
//var path = directoryEntry;
//var path = 'cdvfile://localhost/persistent/path/to/' + fileName;
//alert(path);
// ファイルのダウンロードを実行
fileTransfer.download(uri, path, downloadSuccess, downloadFail);
}
function downloadSuccess(fileEntry) {
alert('ファイルを' + fileEntry.fullPath + 'に保存しました。');
location.reload();
}
function downloadFail(fileTransferError) {
var error = '';
switch(fileTransferError.code) {
case FileTransferError.FILE_NOT_FOUND_ERR:
error = '第2引数にファイルURLが指定されていません';
//error = '第2引数にファイルURLが指定されていません URI=[' + uri + '] PATH=[' + path + ']' ;
break;
case FileTransferError.INVALID_URL_ERR:
error = '不正なファイルパスが第2引数で指定されています';
break;
case FileTransferError.CONNECTION_ERR:
error = '接続エラー';
break;
default:
error = '未定義のエラー';
break;
}
alert(error + '\nhttp_status: ' + fileTransferError.http_status);
}
function viewFile(event) {
//alert("viewFile");
directoryEntry2.getFile(event.target.textContent, null ,getFile,fail);
}
function getFile(fileEntry){
//alert("getFile");
fileEntry.file(readFile,fail);
}
function readFile(file){
//表示部分
var reader = new FileReader();
reader.readAsDataURL(file);
var fname=file.name;
reader.onloadend = function(event){
if(fname.match(/html$/i)){
window.open(monaca.baseUrl+fname, "_system", "");
}else{
var img= new Image();
img.src = event.target.result;
img.onload = function(){
document.getElementById("view").src=img.src;
}
}
}
}
</script>
</head>
<body>
<div class="app">
<h1>File API Test</h1>
<p>
<input id="download" type="button" value="download gihyo logo">
</p>
<ul id="fileList"></ul>
<img id="view" src="" >
</div>
</body>
</html>