相比html4 html5新增特性有,CSS3(二) HTML5 新增四大特性

HTML5 新增四大特性(一)跨域通信

(二)缓存(离线存储)

(三)本地存储

(四)多线程操作

(一)跨域通信

再说到跨域通信必然要提到 2 个方面，第一个是 iframe 第二个是 window.open 他们都是打开新的窗口

简单来记住就是同域名 iframe 就是 contentWindow.子就是 parent 要是 window.open 就是 window.open 和 window.opener 要是跨域名只有 iframe 那就是 contentWindow.postMessage(‘11’,’http://www.a.com')

先说同域名

里面分成 2 个，第一个是 iframe 第二个是 window.open

iframe 父元素要是想改变子元素的背景颜色

第一步要获取到这个 ifrmae

第二部在获取到 contentWindow

第三部在这个对象下面利用 document.body.style[“background”] = “red”

看代码

var iframe1 = document.getElementById("iframe1"); //获取到iframe1框架

iframe1.contentWindow.document.body.style["background"] = "red"; //改变背景颜色

要是子元素想改变父元素 那需要把 iframe1 换成 parent 即可

parent.document.body.style["background"] = "blue";

再来说说 window.open()

父元素想要改变打开新窗口的背景色

var newwindow = window.open('2.html','_blank');

newwindow.document.body.style["background"] = " blue";

要是子元素想改变父元素的窗口的背景色

window.opener.document.body.style["background"] = "red";

再来说说跨域名下。跨域名下面只有 iframe 能实现了

var iframe1 = document.getElementById("iframe1");

iframe1.contentWindow.postMeaage("1","http://www.b.com");

然后是接收方

window.addEventListener("message",function(){

window.alert("我收到数据了");

})

(二)离线存储(缓存)

menifast(缓存)

1.服务器在 apache 下面有一个 httpd.conf 文件

在里面任意位置写上

AddType text/cache-manifest .manifest

2 html 标签里面加

3 在 cache.manifest 里面添加 cachemanifest 表示的就是缓存清单,Fallback 表示当查不到第一个，就换成第二个,network 是必须要添加互联网才能访问的

CACHE MANIFEST

2.png

FALLBACK

style1.css style2.css

NETWORK

(三)本地存储 Storage

Storage 有两种 第一种 sessionStorage 第二种就是 localStorage

sessionStorage 关闭就结束不能页面间共享

localStorage 本地存储能共享，无期限，最大能存储到 5M

存储的方式:

window.localStorage.setItem('url','xxx');

window.localStorage.getItem('url');

window.localStorage.removeItem('url');

window.localStorage.remove();

但是 storge 不能存储数组，只能是字符串。所以必须转换

var arr = [1,2,3];

var result = JSON.stringify(arr);

window.localStorge.setItem("url",result);

var arr2 = JSON.parse(window.localStorge.getItem("url"));

(四)多线程模式

JS 都是单线程的。可以使用 defer(延迟) async(异步)也可以放到底部加载等等

但是 HTML5 提供了一种并发性:同步加载 new worker

发送方:

var w1 = new Worker('test.js');

w1.postMessage('hi');

w1.onmessage = function(e){

console.log(e.data);

}

接收方:

self.onmessage = function(ev){ //在test.js里面写入self 就是w1

alert( ev.data ); //他不认因为在服务器

self.postMessage(ec.data+"妙味课堂");

};