如何實現瀏覽器內多個標簽頁之間的通信?
阿新 • • 發佈:2018-03-23
keyword eve ttr type UNC storage事件 rep ring mage
方法一:使用localStorage
使用localStorage.setItem(key,value);添加內容
使用storage事件監聽添加、修改、刪除的動作
html代碼
JS代碼-頁面1
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
localStorage.setItem("name", name);
});
});
</script>
JS代碼-頁面2
<script type="text/javascript">
$(function(){
window.addEventListener("storage", function(event){
alert(event.key + "=" + event.newValue);
});
});
</script>
方法二、使用cookie+setInterval
HTML代碼
- <inputidinputid="name"><input type="button" id="btnOK"value="發送">
JS代碼-頁面1
- $(function(){
- $("#btnOK").click(function(){
- varname=$("#name").val();
- document.cookie="name="+name;
- });
- });
JS代碼-頁面2
- //獲取Cookie天的內容
- function getKey(key) {
- return JSON.parse("{\""+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key];
- }
- //每隔1秒獲取Cookie的內容
- setInterval(function(){
- console.log(getKey("name"));
- },1000);
如何實現瀏覽器內多個標簽頁之間的通信?