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
发送方:

<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>