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标签里面加
<html manifest="cache.manifest">
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
发送方:

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

w1.postMessage('hi');
w1.onmessage = function(e){
  console.log(e.data);
}
</script>

接收方:

<script>
self.onmessage = function(ev){   //在test.js里面写入self 就是w1
    alert( ev.data );  //他不认因为在服务器
         self.postMessage(ec.data+"妙味课堂");
};
</script>

最后编辑于：2018.02.27 21:17:09