代碼
newOpen(msg) {
const id = window.open('http://www.reibang.com/p/1057b36968cc','_blank','height=1000,width=600');
//可以添加一些內(nèi)容运授，設(shè)置標(biāo)題
id.document.body.innerHTML=`<div>${msg}`</div>`;
id.document.title='這里設(shè)置標(biāo)題';
}
窗口是打開了，這邊有個(gè)需求乔煞，我需要知道新窗口的東西變化了吁朦，然后通知給原先的瀏覽器窗口
解決方式用LocalStorage，window.onstorage監(jiān)聽
//發(fā)送消息
senMsg(type, payload){
localStorage.setItem('@@'+type, JSON.stringify({
payload,
temp:Date.now() //保證存的值不一樣渡贾，這樣監(jiān)聽的時(shí)候就能確保監(jiān)聽到
}))
}
//監(jiān)聽消息
listenMsg(handler){
const storageHandler = e=>{
const data = JSON.parse(e.newValue)
handler(e.key.substring(2), data.payload)
}
window.addEventListener('storage',storageHandler)
return ()=>{
//提供銷毀這個(gè)監(jiān)聽
window.removeEventListener('storage',storageHandler)
}
}
使用
原瀏覽器所屬頁面
export default {
data() {
return {
unHandler: null
}
},
mounted(){
//監(jiān)聽localStorage是否發(fā)生變化
this.unHandler = this.listenMsg((type, payload) =>{
if(type === '定義的localStorage的key及keyName'){
//進(jìn)行你想要的操作
}
})
},
methods:{
//監(jiān)聽消息
listenMsg(handler){
const storageHandler = e=>{
const data = JSON.parse(e.newValue)
handler(e.key.substring(2), data.payload)
}
window.addEventListener('storage',storageHandler)
return ()=>{
//提供銷毀這個(gè)監(jiān)聽
window.removeEventListener('storage',storageHandler)
}
}
}
}
新瀏覽器窗口所屬頁面
export default {
data() {
return {}
},
methods:{
//發(fā)送變化觸發(fā)的函數(shù)
add(){
let data = {name:'張三'}
this.senMsg('keyName', data)
},
//發(fā)送消息
senMsg(type, payload){
localStorage.setItem('@@'+type, JSON.stringify({
payload,
temp:Date.now() //保證存的值一樣逗宜，這樣監(jiān)聽的時(shí)候就能確保監(jiān)聽到
}))
}
},
}
