子页面要向父页面传值,只要在document前面加window.opener即可
window.opener 的用法
window.opener 返回的是创建当前窗口的那个父窗口的引用,比如点击了a.htm上的一个链接而打开了b.htm,然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中,就可以写为:indow.opener.document.getElementById("name").value = "输入的数据";
opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。
当使用window.open()打开一个窗口,您可以使用此属性返回来自目标窗口源(父)窗口的详细信息。
代码提示: window.opener.close()将关闭源(父)窗口。
前端组件整理 https://cloud.tencent.com/developer/article/1195353
一、cookie:
在网站中,http请求是无状态的。也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户。cookie的出现就是为了解决这个问题,第一次登录后服务器返回一些数据(cookie)给浏览器,然后浏览器保存在本地,当该用户发送第二次请求的时候,就会自动的把上次请求存储的cookie数据自动的携带给服务器,服务器通过浏览器携带的数据就能判断当前用户是哪个了。cookie存储的数据量有限,不同的浏览器有不同的存储大小,但一般不超过4KB。因此使用cookie只能存储一些小量的数据。
二、session:
session和cookie的作用有点类似,都是为了存储用户相关的信息。不同的是,cookie是存储在本地浏览器,而session存储在服务器。存储在服务器的数据会更加的安全,不容易被窃取。但存储在服务器也有一定的弊端,就是会占用服务器的资源,但现在服务器已经发展至今,一些session信息还是绰绰有余的。
三、cookie和session结合使用:
web开发发展至今,cookie和session的使用已经出现了一些非常成熟的方案。在如今的市场或者企业里,一般有两种存储方式:
1、存储在服务端:通过cookie存储一个session_id,然后具体的数据则是保存在session中。如果用户已经登录,则服务器会在cookie中保存一个session_id,下次再次请求的时候,会把该session_id携带上来,服务器根据session_id在session库中获取用户的session数据。就能知道该用户到底是谁,以及之前保存的一些状态信息。这种专业术语叫做server side session。
2、将session数据加密,然后存储在cookie中。这种专业术语叫做client side session。flask采用的就是这种方式,但是也可以替换成其他形式。
1、简化的文档类型和字符集
(1)文档类型
1 |
|
之所以如此简单,是因为HTML5不再是SGML( Standard Generalized Markup language,标准通用标记语言)的一部分,而是独立的标记语言,不需要再考虑文档类型
(2)字符集
1 |
|
只需要utf-8即可
2、富有语义化的新结构元素
1 |
|
1 2 3 4 |
|
section元素 可以认为div是section元素,一个普通的分块元素,可用来定义网站中的特定的可区别的区域
header元素包括标题,logo,导航和其他页眉的内容,可以在网站上加多个header,就像给内容加多个标题
hgroup元素 即将标题进行分组的元素
footer元素版权声明和作者信息,包涵一些链接
nav元素主要用于主导航菜单
article元素独立成文且以其他格式重用的内容应该置于一个article元素中
aside元素用途包涵内容周围的相关内容
3、新增的内联元素
1 2 3 4 |
|
figure元素一个典型用途是包含图像,代码和其他内容对主要内容进行说明,删除不会影响主内容
figcaption元素主要用于figure的标题
mark元素突出显示以表示引用的内容,或者突出显示与用户当前活动相关的内容,他不同于en或strong元素
time元素,当需要在内容中显示时间或者日期时,则建议使用time元素
time元素可以包涵两个属性,一个datetime表示在元素中指定的确切日期和世家,pubdate表示文章或者整个文档发布时time元素所指定的日期和时间
meter元素用于定义度量衡,规定最大最小宽高,通常要结合css一起作用,效果如下:
progress元素用于定义一个进度条,有max(完成值)和value(进度条当前值)两个属性。
4、支持动态页面
1)菜单<menu>
用于表单中组织控件列表,常用属性如下:
定义一个选择列表的例子:
1 2 3 4 5 6 7 |
|
2)右键菜单<menitem>
3)在<script>标签中使用async属性
用于指定异步执行的脚本
4)<detail>元素
用于描述文档或文档某个部分的细节
1 2 3 4 |
|
效果:
展开后:
5、全新的表单设计
HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
HTML5 的新的表单元素:
- datalist
- keygen
- output
新的 form 属性:
- autocomplete
- novalidate
新的 input 属性:
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
实例:
1 |
|
结果:
6、强大的绘图功能和多媒体功能
1)canvas 可以动态地绘制各种效果精美的图形,结合js就能让网页图形动起来
2)SVG 绘制可伸缩的矢量图形
3)audio和 video 可以不依赖任何插件播放音频和视频
7、打造桌面应用的一系列新功能
离线缓存 Web Storage(为HTML5开发移动应用提供了基础)
传统的web应用程序中,数据处理都由服务器处理,html只负责展示数据,cookie只能存储少量的数据,跨域通信只能通过web服务器。
HTML5扩充了文件存储的能力,多达5MB,支持WebSQL等轻量级数据库,可以开发支持离线web应用程序。
HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少网络流量。
同时,这个功能算得上是另一个方向的后台“操作记录”,而不占用任何后台资源,减轻设备硬件压力,增加运行流畅性。
8、获取地理位置信息
新增Geolocation API,可以通过浏览器获取用户的地理位置,不再需要借助第三方地址数据库或专业的开发包,提供很大的方便。
9、支持多线程
新增Web Worker对象,可以在后台运行js脚本,也就是支持多线程,从而提高了页面加载效率。
10、废弃的标签
1.表现性元素
2.框架类元素
3.属性类
4.其他类
页面缓存指的还是有网络状态下,而离线web应用指的是在没有网络状态可以运行应用
2.本地存储
h5提供了sessionStorage、localStorage和indexedDB加强本地存储。使用之前应该先判断支持情况
if(window.sessionStorage){
//浏览器支持sessionStorage
}
if(window.localStorage){
//浏览器支持localStorage
}
localStorage和sessionStorage的区别在于sessionStorage基于会话,关闭浏览器之后存储消失。localStorage在各浏览器中上限不同,最低的是2.6MB, 所以开发上限为2.6MB, 当然这比cookie强太多,如果还是不够的话只能借助indexedDB, indexedDB上限是250MB。
localStorage和cookie另一个区别是没有过期时间,不过这个可以在localStorage中加一个时间字段轻松解决这个问题。
存取localStorage可能遇到的坑是跨域问题,因为localStorage是域内安全,也就是同一个域才能对localStorage进行存储,可以通过postMessage来解决。以下是它的常用应用场景
var userData = {
name : 'sysuzhyupeng',
age: 24
}
localStorage.setItem('userDate', JSON.stringify(userData));
var newUserData = JSON.parse(localStorage.getItem('userData'));
另外,浏览器提供了storage事件来监听存储
window.addEventListener('storage', showStorageEvent, true)
3.离线web应用
页面缓存指的还是有网络状态下,而离线web应用指的是在没有网络状态可以运行应用
if(window.applicationCache){
//支持离线应用
}
manifest文件是核心,记录着哪些资源文件需要离线应用缓存,要使用manifest,只需要在html标签中添加属性
<html manifest="cache.manifest">
cache.manifest的文件格式如下
CACHE MANIFEST
#缓存的文件
index.html
test.js
#不做缓存
NETWORK
/images/
FALLBACK
offline.html index.html
#缓存的文件下面是当网络不可用时,文件直接从本地缓存读取,#NETWORK下面的文件无论是否已经缓存,都要从网络中下载。FALLBACK后面,当无法获取到offline.html,则转到index.html。
4.表单新增功能
以往input中的name和value要随着form表单一起提交,form表单必须包裹input , 而现在可以通过input的form属性綁定
<form id="testform">
<input type="text" />
</form>
<input form=testform />
placeholder屬性
<input type="text" placeholder="请输入密码" />
autofocus属性,页面只能有一个
<input type="text" autofocus />
还有type为email、number等,但是实际项目中一般使用自定义,所以这里不提。
5. CSS3
CSS3提供了更多的选择器,before、after、first-child、nth-child。提供的效果包括box-shadow、text-shadow、background-size,以background-size为例, 在具体语法不同浏览器有所区别,所以要使用以下写法
background-size: 10px 5px
-webkit-background-size: 10px 5px
还可以使用media-query实现响应式布局
@media (max-width: 1190px) {
...
}
6.地理定位
h5提供了Geolocation API访问地理位置,即通过window.navigator.geolocation来实现访问。这个对象有三个方法:
getCurrentPosition()
watchPosition()
clearWatch
页面第一次使用这个api需要获得用户许可, watchPosition可以对位置变化事件进行监听。