菜单

基于HTML5 FileSystem API的拔取介绍

2019年1月20日 - Ajax

HTML5 web通知API介绍

2015/04/17 · HTML5 · 2
评论
·
web通知

本文由 伯乐在线
ElvisKang
翻译,周进林
校稿。未经许可,禁止转发!
英文出处:www.sevensignature.com。欢迎插足翻译组

manbetx2.0手机版 1

在利用网页版Gmail的时候,每当收到新邮件,屏幕的右下方都会弹出相应的提示框。借助HTML5提供的Notification
API,大家也得以轻松已毕那样的意义。

点评:HTML5的有力之一就是允许web程序提请一些暂时或者永久的空中(Quota)在那边可以展开多少的贮存甚至文件的操作

担保浏览器扶助

若是您在一定版本的浏览器上开展付出,那么自己指出您先到
caniuse
查看浏览器对Notification
API的支撑情形,幸免你将贵重时间浪费在了一个不能利用的API上。

HTML5的精锐之一就是同意web程序提请一些暂时或者永久的上空(Quota)在此地可以展开
数据的仓储甚至文件的操作。

何以开首

JavaScript

var notification=new Notification(‘Notification Title’,{ body:’Your
Message’ });

1
2
3
var notification=new Notification(‘Notification Title’,{
    body:’Your Message’
});

地方的代码构造了一个简陋的公告栏。构造函数的首先个参数设定了布告栏的标题,而第三个参数则是一个option
对象,该目的可设置以下属性:

FileSystem提供了文本夹和文书的始建、移动、删除等操作,大大便利了数码的本地处理,
而且所有的数码都是在沙盒(sandboxed)中,不一样的web程序不能相互走访,那就保障了数据
的一体化和海东。

赢得权力

在显示公告栏以前需向用户申请权限,唯有用户同意,布告栏才可出现在屏幕中。对权力申请的拍卖将有以下重返值:

JavaScript

Notification.requestPermission(function(permission){ //display
notification here making use of constructor });

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f063d76a49818832322-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f063d76a49818832322-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f063d76a49818832322-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f063d76a49818832322-1" class="crayon-line">
Notification.requestPermission(function(permission){
</div>
<div id="crayon-5b8f063d76a49818832322-2" class="crayon-line crayon-striped-line">
//display notification here making use of constructor
</div>
<div id="crayon-5b8f063d76a49818832322-3" class="crayon-line">
});
</div>
</div></td>
</tr>
</tbody>
</table>

用HTML创制一个按钮

XHTML

<button id=”button”>Read your notification</button>

1
<button id="button">Read your notification</button>

无须遗忘了CSS

CSS

#button{ font-size:1.1rem; width:200px; height:60px; border:2px solid
#df7813; border-radius:20px/50px; background:#fff; color:#df7813; }
#button:hover{ background:#df7813; color:#fff; transition:0.4s ease;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#button{
  font-size:1.1rem;
  width:200px;
  height:60px;
  border:2px solid #df7813;
  border-radius:20px/50px;
  background:#fff;
  color:#df7813;
}
#button:hover{
  background:#df7813;
  color:#fff;
  transition:0.4s ease;
}

方方面面的Javascript代码如下:

JavaScript

document.addEventListener(‘DOMContentLoaded’,function(){
document.getElementById(‘button’).addEventListener(‘click’,function(){
if(! (‘Notification’ in window) ){ alert(‘Sorry bro, your browser is not
good enough to display notification’); return; }
Notification.requestPermission(function(permission){ var config = {
body:’Thanks for clicking that button. Hope you liked.’,
icon:’https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI\_HTML5.png‘,
dir:’auto’ }; var notification = new Notification(“Here I ammanbetx2.0手机版,!”,config);
}); }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.addEventListener(‘DOMContentLoaded’,function(){
        document.getElementById(‘button’).addEventListener(‘click’,function(){
            if(! (‘Notification’ in window) ){
                alert(‘Sorry bro, your browser is not good enough to display notification’);
                return;
            }    
            Notification.requestPermission(function(permission){
                var config = {
                              body:’Thanks for clicking that button. Hope you liked.’,
                              icon:’https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png’,
                              dir:’auto’
                              };
                var notification = new Notification("Here I am!",config);
            });
        });
    });

从那段代码可以看出,如果浏览器不协助Notification API,在点击按钮时将会产出警示“兄弟,很对不起。你的浏览器并无法很好地援救通告功用”(Sorry
bro, your browser is not good enough to display
notification)。否则,在取得了用户的允许之后,大家自制的文告栏便得以出现在屏幕中间啦。

怎么要让用户手动关闭通告栏?

对此那一个题目,大家得以器重set提姆(Tim)eout函数设置一个时日距离,使布告栏能定时关闭。

JavaScript

var config = { body:’Today too many guys got eyes on me, you did the
same thing. Thanks’, icon:’icon.png’, dir:’auto’ } var notification =
new Notification(“Here I am!”,config); setTimeout(function(){
notification.close(); //closes the notification },5000);

1
2
3
4
5
6
7
8
9
var config = {
               body:’Today too many guys got eyes on me, you did the same thing. Thanks’,
               icon:’icon.png’,
               dir:’auto’
             }
var notification = new Notification("Here I am!",config);
setTimeout(function(){
    notification.close(); //closes the notification
},5000);

该说的事物就这一个了。如若您意犹未尽,希望越来越深切地打听Notification
API,能够阅读以下的页面:

在CatWrite项目中,运用了HTML5的这几个特性开展数据的蕴藏,卓殊惠及,只是近年来的话唯有Chrome浏览器对FileSystem API扶助的相比较好,所以只能运行在Chrome浏览器中。

在CodePen上查看demo

你可以在CodePen上来看由Prakash
@imprakash)编写的demo

赞 收藏 2
评论

在成功这几个效率的时候,查阅了累累材料,有一对素材是一年前的,但是随着浏览器版本的
变化,一些代码已经老化,在那里一一总括和整理。那里只列举了项目中用到的API,算是
对成就功用的两回梳理。

有关小编:ElvisKang

manbetx2.0手机版 2

QQ:285273704天涯论坛:@康恺暄邮箱:elviskang@foxmail.com
个人主页
·
我的作品
·
10

manbetx2.0手机版 3

报名空间 为了拓展数据的积存,必须求向浏览器举办报名,假诺是恒久存储还会向用户进行问询,只有同意后才会继续执行。

率先必必要注明想要的权力。

代码如下:

window.requestFileSystem = window.requestFileSystem ||
window.webkitRequestFileSystem; //文件系统请求标识
window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL ||
window.webkitResolveLocalFileSystemURL; //依照URL取得文件的读取权限

获取系统的权杖后就足以向浏览器申请空间

代码如下:

window.requestFileSystem(window.PERSISTENT, //persistent(永久) or
temporary(临时)
1024*1024, //1M
onInitFs, //成功后的回调函数
errorHandler); //错误后的回调函数

回调函数

代码如下:

function onInitFs(fs){
fs.root.getDirectory(‘catwrite_documents’, {create: true},
function(dirEntry) {
console.log(‘You have just created the ‘ + dirEntry.name + ‘
directory.’);
}, errorHandler);
}
//错误回调
function errorHandler(err){
var msg = ‘An error occured: ‘;
switch (err.code) {
case FileError.NOT_FOUND_ERR:
msg += ‘File or directory not found’;
break;
case FileError.NOT_READABLE_ERR:
msg += ‘File or directory not readable’;
break;
case FileError.PATH_EXISTS_ERR:
msg += ‘File or directory already exists’;
break;
case FileError.TYPE_MISMATCH_ERR:
msg += ‘Invalid filetype’;
break;
default:
msg += ‘Unknown Error’;
break;
};
console.log(msg + err);
}

如果成功后悔调用OnInitFs回调函数,在其间用了getDirectory方法用来创立一个文件夹,那上边再说。

可是那是有个问题,这样做的话每便加载页面都会申请,这一定不是咱们想要的,大家要
的是在有数据的时候就足以读取数据。

看清是否申请过空间 据此大家须要读取浏览器的数目,看看是否已有囤积。那就用到了另一个API:

代码如下:

void queryUsageAndQuota(
in DOMString url,
in EntryCallback successCallback,
in optional ErrorCallback errorCallback
);

其一API可以查询当前web的半空中情状,倘使成功的话就会调用successCallback回调函数
并把已用空间和整个空中作为参数传入方法中。若是战败则调去errorCallback。

代码如下:

window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT,
function(used, remaining){
if(remaining == “”){
console.log(“未申请空间。”);
}else{
console.log(“已运用空间”+used);
console.log(“全体空间”+remaining);
}
},
errorHandler); </p> <p>

大家得以经过判断remaining参数来判定是否有申请空间,如果没有报名,则赶回上一步申请空间。
假使已经有空中的话,则要求得到空间的跟文件,这样才能操作数据。

收获文件输入 FileSystem使用了奇特的文件系统和沙盒形式,在处理器上依旧其余web中是无法访问沙盒中的文件的
,只好用相应的格式去拜访。

在浏览器中输入:

?filesystem:http://catcoder.com/persistent/
  

诸如此类可以访问catcoder.com那个网站在本机永久数据,把persistent换成temporary则是读取临时空间。

然后大家就可以透过URL和呼应API获取文件的输入(Lets you look up the entry
for a file or directory with a local URL)。

代码如下:

void resolveLocalFileSystemURL(
in DOMString url,
in EntryCallback successCallback,
in optional ErrorCallback errorCallback
);

上面就足以读取本机存储的数量了

代码如下:

var url = “filesystem:http://” + window.location.host +
“/persistent/catwrite_documents/”;
window.resolveLocalFileSystemURL(url,function(fileEntry){
console.log(fileEntry);
var dirReader = fileEntry.createReader();
var readEntries = function(){
dirReader.readEntries(function(results){
if(!results.length){
create_file_title(“默许文件”, “”);
console.log(“没有公文!”);
}else{
console.log(“读取到” + results.length + “个文件”);
for(var i = 0; i < results.length; i++){
console.log(results[i].name);
getFileContentByName(fileEntry, results[i].name);
}
}
},errorHandler);
};
readEntries();
},errorHandler);

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图