不同頁面通信與跨域0. 前言1. localstorage2. 玩轉iframe3. 非同域的兩個tab頁面通信4.MessageChannel

0. 前言

相信跨域有什麼手段,大家都背得滾瓜爛熟了。現在我們來做一些不在同一個tab頁面或者跨域的實踐。

1. localstorage

1.1 onstorage事件

localstorage是瀏覽器同域標籤共用的存儲空間,所以可以用來實現多標籤之間的通信。html5出現了一個事件: onstorage,我們在window對象上添加監聽就可以監聽到變化: window.addEventListener('storage', (e) => console.log(e))

需要注意,此事件是非當前頁面對localStorage進行修改時纔會觸發,當前頁面修改localStorage不會觸發監聽函數。如果實在是要,自己重寫一個方法吧,要不就在修改的時候把自己改的內容po上去。

示例: js:

if(!localStorage.getItem('a')){
	localStorage.setItem('a',1)
}else{
	var s = localStorage.getItem('a')
	localStorage.setItem('a',+s+1)
}
window.addEventListener('storage', (e) => console.log(e))
複製代碼

我們新建兩個html分別叫1.html和2.html,並加上上面的js,於是我們每次打開或者刷新該頁面就會給a加上1。需要注意的是,如果是雙擊打開,是在file://協議下的,而且不會觸發storage事件,但是會給a加上1,所以可以做一個功能,計算本地某個文件被打開了多少次。如果我們用服務器打開,我們的不同tab頁面通信完成了,而且是實時的。

2. 玩轉iframe

我們都知道frame可以跨域,那麼我們來試一下。下面例子,都是一個html內嵌iframe,當然你直接打開iframe那個文件,沒什麼意義的

2.1 利用hash變化傳遞信息實現父子窗口通信(能跨域)

父窗口:1.html

html:

<iframe name="myIframe" src="http://localhost:1000/2.html"></iframe>
複製代碼

js:

var originURL = myIframe.location.href
var i = document.querySelector('iframe')
i.onload= function(){//這是異步加載的iframe
  i.src += '#aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
}
複製代碼

子窗口:2.html

window.onhashchange = function() {
    console.log(window.location.hash)
}
複製代碼

我們打開父窗口,發現子窗口的js已經跑起來了。

既然能跨域,我們直接雙擊打開1.html,發現還是可以,這個例子雙擊打開和服務器打開都能達到目的

2.2 父調用子頁面的js或者反過來調用

父調子:還是基於前面的條件

var i = document.querySelector('iframe')
i.onload= function(){
myIframe.window.f();
}
複製代碼

子:2.html

function f(){
	console.log('this is 2.html')
}
複製代碼

子調父: 子:2.html

parent.fn1()
複製代碼

父:1.html

function fn1(s){
	console.log('this is 1.html')
}
}
複製代碼

當然,你直接打開2.html是沒意義的而且是報錯:Uncaught TypeError: parent.fn1 is not a function

這個需要注意,不能跨域,所以雙擊打開以及不同域是報錯的:Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.,只能服務器打開

2.3 window.name (能跨域)

類似於vue、react的prop父子傳值,只要在父窗口設置iframe標籤的name,在子窗口就可以讀到。

父窗口:1.html

<iframe  name="myIframe" src="http://localhost:1000/2.html"></iframe>
複製代碼

子窗口:2.html

console.log(window.name)
複製代碼

少年,放心地雙擊打開吧,有效果的。

2.4 postmessage(能跨域)

H5之後爲window新增了window.postMessage()方法,第一個參數是要發送的數據,第二個參數是域名。

父窗口:1.html

<iframe id="test" name="myIframe" src="http://localhost:1000/2.html"></iframe>

//js
var frame = document.querySelector('iframe')
frame.onload = function(argument) {
	window.frames[0].postMessage('data from html1', '*');
}
複製代碼

子窗口:2.html

window.onmessage = function (e) {
	console.log(e.data)
}
複製代碼

可以跨域,所以能直接雙擊打開可以看見效果。

上面的父子窗口,是指一個html裏面的iframe標籤引入另一個html。

3. 非同域的兩個tab頁面通信

也就是兩個毫無關係的tab頁面通信(比如我打開一個baidu和一個github),怎麼通?

當然baidu和github能不能通信,我們不知道,得問他們家的開發。前面我們已經知道,iframe能跨域,localstorage能使得兩個tab頁面通信。那我們就來試一下,iframe橋接兩個互不相干的tab頁面。注意,bridge是一個html,其他兩個tab是指瀏覽器打開的兩個html文件。你可以另外建立兩個不同的html,也可以建立兩個一模一樣的html,然後雙擊打開也好、服務器打開也好,有兩個就可以了。

下面,我們把橋接的iframe叫做bridge.html吧。我們用node打開,監聽本地的1000端口。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>hi</h1>
  </body>
  <script type="text/javascript">
window.addEventListener("storage", function(ev){
    if (ev.key == 'info') {
        window.parent.postMessage(ev.newValue,'*');
    }
});


window.addEventListener('message',function(e){
    // 接受到父文檔的消息後,廣播給其他的同源頁面
    localStorage.setItem('info',e.data);
});
  </script>
</html>
複製代碼

我們再來兩個頁面,內容如下。接着我們可以以n種不同方式分別打開,反正是非同源就可以了

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
    <input id="ipt" type="text" name="">
    <button onclick="sub()">sub</button>
    <p id="cont"></p>
    <iframe src="http://localhost:1000/" style="display: none"></iframe>
</body>
<script type="text/javascript">
    var ipt = document.querySelector('#ipt')
    function sub(){
      document.querySelector('iframe').contentWindow.postMessage(ipt.value,'*');
      cont.innerHTML +='我:'+ ipt.value + '<br>'
      ipt.value = ''
    }
    window.addEventListener('message',function(e){
      if(e.data) cont.innerHTML +='對方:'+ e.data + '<br>'
      
    });
</script>
</html>
複製代碼

然後一個簡單的聊天就搞定了,試試看。加上websocket的話,還可以非同源聊天呢,其他的可以自己隨意設置了。

從1到2的信息實時傳遞更新就這樣子成功了,反之亦然。

4.MessageChannel

顧名思義,信息通道。允許我們創建一個新的消息通道,並通過它的兩個MessagePort 屬性發送數據m,而且在 Web Worker 中可用。可以控制檯打印,發現有兩個屬性,portl1和port2。一個頁面內嵌與iframe最常用這種方法。

就像一條管道,一邊出一邊進,我們可以給postmessage方法加上第三個參數:

var channel = new MessageChannel();
channel.port1.addEventListener("message", function(e){
    window.parent.postMessage(e,'*',[channel.port2]);
    channel = null;
});
複製代碼

深拷貝

n種不同的對象類型?環引用?怎麼做到特別容易的深拷?

然而真的做到了:

var obj ={a:1,b:2,c:{d:3,e:[{f:1,g:2}]},h:null}
obj.h = obj
var res 
new Promise(resolve => {
    var channel = new MessageChannel();
    channel.port2.onmessage = ev => resolve(ev.data);
    channel.port1.postMessage(obj);
  }).then(data=>{res = data})
複製代碼

傳了數據給管道,管道傳回來一個長得一模一樣的數據回來,實現了深拷貝。我們叫他結構化克隆,能處理對象循環依賴和大部分的內置對象。比如postMessage發消息給子窗口或者WebWorker的時候就會經常用到,拿到數據進行處理,但不污染原數據。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章