項(xiàng)目中需要用到web一機(jī)雙屏,也就是一臺(tái)電腦,兩個(gè)屏幕,每個(gè)屏幕分別展示一部分的內(nèi)容,兩個(gè)web標(biāo)簽頁之間自然少不了實(shí)時(shí)通信和互動(dòng),下面簡單介紹一下,在項(xiàng)目中對(duì)該問題的思考和最終解決方案:
一:打開兩個(gè)標(biāo)簽頁的方案
1.如果打開的標(biāo)簽頁是固定的,則可以直接在a標(biāo)簽加上target="_blank"屬性搞定!例如:打開必應(yīng)首頁 代碼為: <a href="http://cn.bing.com/" target="_blank">必應(yīng)首頁</a>
2.如果頁面地址是動(dòng)態(tài)變化的,則可以使用js的 window.open(url)方法。
有兩個(gè)注意點(diǎn):
第一個(gè)安全性問題:如果父頁面和新打開的頁面詩不同域名的,瀏覽器會(huì)禁止新窗口訪問opener中內(nèi)容,但是可以通過window.opener.location=newURl來重寫父頁面的url,即使與父頁面不同域。如果父窗口沒有做防止被iframe嵌入,那么可以使用iframe做一個(gè)釣魚頁面,如果不注意url的化,你可能就被釣魚了。
第二個(gè)性能問題:chrome每個(gè)標(biāo)簽頁都是一個(gè)單獨(dú)的進(jìn)程,然后進(jìn)程內(nèi)包含很多個(gè)線程,但是如果是通過a標(biāo)簽的target="_blank"或者window.open(url)在新窗口中打開頁面,子窗口會(huì)于父窗口共用進(jìn)程和線程,子窗口如果進(jìn)行了復(fù)雜的運(yùn)算或者請(qǐng)求,那么父窗口極有可能被卡住。
破解方法:
1.通過在a標(biāo)簽上添加這個(gè)noopener屬性,可以將新打開窗口的opner置為空。
2.window.open并設(shè)置opner為空
1 var newWindow= window.open('xxx');2 newWindow.opener = null;
二:雙屏通信方案
1.localStorage
通過監(jiān)聽localStorage的數(shù)據(jù)變化實(shí)現(xiàn)同一瀏覽器下不同頁面之間的通訊,(跨域不適用,需要結(jié)合postmessage),在雙屏有大量的通訊的時(shí)候,建議使用,方便快捷!
推薦lsbridge庫直接進(jìn)行應(yīng)用。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
