分類導(dǎo)航

一機(jī)雙屏和雙屏通信方案總結(jié)

發(fā)布時(shí)間：2017年02月21日作者：文章轉(zhuǎn)自網(wǎng)絡(luò)，版權(quán)歸原作者所有，反饋可立刻刪除 (該文來(lái)自筆記，點(diǎn)擊查看原文)

項(xiàng)目中需要用到web一機(jī)雙屏，也就是一臺(tái)電腦，兩個(gè)屏幕，每個(gè)屏幕分別展示一部分的內(nèi)容，兩個(gè)web標(biāo)簽頁(yè)之間自然少不了實(shí)時(shí)通信和互動(dòng)，下面簡(jiǎn)單介紹一下，在項(xiàng)目中對(duì)該問(wèn)題的思考和最終解決方案：

一：打開兩個(gè)標(biāo)簽頁(yè)的方案

1.如果打開的標(biāo)簽頁(yè)是固定的，則可以直接在a標(biāo)簽加上target="_blank"屬性搞定！例如：打開必應(yīng)首頁(yè) 代碼為： <a href="http://cn.bing.com/" target="_blank">必應(yīng)首頁(yè)</a>

2.如果頁(yè)面地址是動(dòng)態(tài)變化的，則可以使用js的 window.open(url)方法。

有兩個(gè)注意點(diǎn)：

第一個(gè)安全性問(wèn)題：如果父頁(yè)面和新打開的頁(yè)面詩(shī)不同域名的，瀏覽器會(huì)禁止新窗口訪問(wèn)opener中內(nèi)容，但是可以通過(guò)window.opener.location=newURl來(lái)重寫父頁(yè)面的url,即使與父頁(yè)面不同域。如果父窗口沒有做防止被iframe嵌入，那么可以使用iframe做一個(gè)釣魚頁(yè)面，如果不注意url的化，你可能就被釣魚了。

第二個(gè)性能問(wèn)題：chrome每個(gè)標(biāo)簽頁(yè)都是一個(gè)單獨(dú)的進(jìn)程，然后進(jìn)程內(nèi)包含很多個(gè)線程，但是如果是通過(guò)a標(biāo)簽的target="_blank"或者window.open(url)在新窗口中打開頁(yè)面，子窗口會(huì)于父窗口共用進(jìn)程和線程，子窗口如果進(jìn)行了復(fù)雜的運(yùn)算或者請(qǐng)求，那么父窗口極有可能被卡住。

破解方法：

1.通過(guò)在a標(biāo)簽上添加這個(gè)noopener屬性，可以將新打開窗口的opner置為空。

2.window.open并設(shè)置opner為空

1 var newWindow= window.open('xxx');2 newWindow.opener = null;

二：雙屏通信方案

1.localStorage

通過(guò)監(jiān)聽localStorage的數(shù)據(jù)變化實(shí)現(xiàn)同一瀏覽器下不同頁(yè)面之間的通訊，（跨域不適用，需要結(jié)合postmessage）,在雙屏有大量的通訊的時(shí)候，建議使用，方便快捷！

推薦lsbridge庫(kù)直接進(jìn)行應(yīng)用。

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計(jì)算培訓(xùn),高端軟件開發(fā)培訓(xùn),項(xiàng)目經(jīng)理培訓(xùn)

分類導(dǎo)航

一機(jī)雙屏和雙屏通信方案總結(jié)

一：打開兩個(gè)標(biāo)簽頁(yè)的方案

二：雙屏通信方案

延伸閱讀

我想了解如何學(xué)習(xí)