代码
newOpen(msg) {
const id = window.open('https://www.jianshu.com/p/1057b36968cc','_blank','height=1000,width=600');
//可以添加一些内容,设置标题
id.document.body.innerHTML=`<div>${msg}`</div>`;
id.document.title='这里设置标题';
}
窗口是打开了,这边有个需求,我需要知道新窗口的东西变化了,然后通知给原先的浏览器窗口
解决方式用LocalStorage,window.onstorage监听
//发送消息
senMsg(type, payload){
localStorage.setItem('@@'+type, JSON.stringify({
payload,
temp:Date.now() //保证存的值不一样,这样监听的时候就能确保监听到
}))
}
//监听消息
listenMsg(handler){
const storageHandler = e=>{
const data = JSON.parse(e.newValue)
handler(e.key.substring(2), data.payload)
}
window.addEventListener('storage',storageHandler)
return ()=>{
//提供销毁这个监听
window.removeEventListener('storage',storageHandler)
}
}
使用
原浏览器所属页面
export default {
data() {
return {
unHandler: null
}
},
mounted(){
//监听localStorage是否发生变化
this.unHandler = this.listenMsg((type, payload) =>{
if(type === '定义的localStorage的key及keyName'){
//进行你想要的操作
}
})
},
methods:{
//监听消息
listenMsg(handler){
const storageHandler = e=>{
const data = JSON.parse(e.newValue)
handler(e.key.substring(2), data.payload)
}
window.addEventListener('storage',storageHandler)
return ()=>{
//提供销毁这个监听
window.removeEventListener('storage',storageHandler)
}
}
}
}
新浏览器窗口所属页面
export default {
data() {
return {}
},
methods:{
//发送变化触发的函数
add(){
let data = {name:'张三'}
this.senMsg('keyName', data)
},
//发送消息
senMsg(type, payload){
localStorage.setItem('@@'+type, JSON.stringify({
payload,
temp:Date.now() //保证存的值一样,这样监听的时候就能确保监听到
}))
}
},
}