重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
使用HTML5的NotificationAPI的方法:1、申请权限出于安全考虑,要发送桌面消息,需要先申请用户授权。Notification对象提供了一个静态的方法——requestPermission(),它接收一个回调函数作为参数,并把返回值传递给回调函数作为参数:Noti
创新互联建站专注于企业全网营销推广、网站重做改版、商城网站定制设计、自适应品牌网站建设、html5、成都商城网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为商城等各大城市提供网站开发制作服务。
应用程序接口,开发程序的时候我们需要调用api,为什么需要调用api呢?因为很多系统的操作我们自己写程序是完成不了的,这就需要调用人家写好的方法,这个方法就是人家提供的api。比如获取浏览器的版本,我们只要调用一个关于version方面的方法就可以得到版本信息,具体怎么得到的是人家在低层写好的。HTML5同样这个道理,什么getElementById();这些方法都成为api,如果人家不给你提供这个方法,你就没法得到一个dom元素。所以说查api文档,就是查那些人家写好的方法。
api就是接口,html里面的api也不例外,也是些编程接口,是你访问一些编码指令和一些标准的一个接口一个集合,就跟插座一样,是电和电器的一个接口。比如html5里面的canvas,是绘图的一个api,html5获取地理位置的api,即时通信的api,文件读取api等等,通过这些api来访问标准里面的指令编码,来操纵相应的操作。
现在主流浏览器基本上实现了全屏效果,但是不同浏览器实现不一样:
【进入和退出全屏】
// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C 提议
element.requestFullscreen();
document.exitFullscreen();
//进入全屏
function requestFullScreen() {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
}
//退出全屏
function exitFullscreen() {
var de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
}
//调用
document.body.addEventListener('click',function(){
requestFullScreen();
//5秒钟自动退出全屏
setTimeout(function(){
exitFullscreen();
},5000);
},false);
检查全屏状态变化 Detecting fullscreen state change
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);
css的全屏样式 Styling fullscreen
在css中,我们有几个伪类来给全屏设置样式,一般是 full-screen 这个伪类,然后会自动再全屏的时候生效
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}
全屏状态下的键盘输入 Full screen with key input
为了安全原因,很多情况下全屏输入都是被阻塞禁止的,但是chrome允许通过下面的API来允许键盘输入
docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
这个只在chrome支持,其他浏览器不支持。firefox计划使用requestFullscreenWithKeys 方法来支持鼠标输入,但是会触发用户通知已保证安全。
firefox10以上,chrome 15和safari5.1以上都支持了。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素,比如 article、footer、header、nav、section;
(6)表单控件,calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;