浏览器标签页之间通信的实现

更新日期: 2019-06-18阅读: 2.7k标签: 通信

使用场景

前端开发过程中,总是避免不了要进行前端标签页之间的通信,最经典的例子莫过于音乐播放网站中,当第一次点击播放列表中的歌曲时,它会打开一个新的标签页进行播放,而当在列表中再次点击歌曲播放时,并不会再多打开一个标签页,而是会在刚才新打开的标签页上播放歌曲。


方式方法

这里跳转新页面均使用window.open方法,这里稍微说下window.open方法的参数

url(可选):一个字符串,表示要加载的资源的 URL 或路径。如果指定空字符串("")或省略此参数,则会在目标浏览上下文中打开一个空白页。

target(可选):一个不含空格的字符串,用于指定加载资源的浏览上下文的名称。如果该名称无法识别现有的上下文,则会创建一个新的上下文,并赋予指定的名称。还可以使用特殊的 target 关键字:_self、_blank、_parent 和 _top。该名称可用作<a>或<form>元素的target属性。

windowFeatures(可选):一个字符串,包含以逗号分隔的窗口特性列表,形式为 name=value,布尔特性则仅为 name。这些特性包括窗口的默认大小和位置、是否打开最小弹出窗口等选项。

在下面的例子中采用audio作为浏览上下文的名称,让他从始至终只创建一个新的标签页

1.使用路由上的query传参

list.html

const broadCastChannel = new BroadcastChannel('audio')
function showAudio(){
    //方式一:通过query,缺点会刷新已打开的页面,但并没有同源策略影响
    window.open('/audio.html?name=张三&id=555','audio')
}

audio.html

const app = document.getElementById('app')
const query = new URLSearchParams(window.location.href.split('?')[1])
app.innerText = query.get('name')

优点:每次打开,audio页面都会变为当前活动标签页

缺点:

  • 每次打开,audio页面都会被刷新,重新加载
  • 如果新打开的浏览上下文不共享相同的源2,则打开脚本将无法与浏览上下文的内容进行交互(读取或写入)。

2.使用localStroage监听

利用同源页面2共享localStroage的特性,利用windw.addEventLister监听stroage3的变化,来实现两个标签页的通信,详细查看下面例子:

list.html

function showAudio(){
    if(!localStorage.getItem('hasAudio')){
        window.open('/audio.html','audio')
        localStorage.setItem('hasAudio',1)
    }
    setTimeout(()=>{
        localStorage.setItem('name','李四')
    },3000)
}

audio.html

window.onunload = () =>{
    localStorage.removeItem('hasAudio')
    localStorage.removeItem('name')
}
const app = document.getElementById('app')
window.addEventListener('stroage',e=>{
    const app = document.getElementById('app')
    app.innerText = e.newValue
})

优点:

  • 第一次打开,之后再传参无需刷新界面重新加载资源

缺点:

  • 打开页面的需为同源页面,localStroage在同源页面中共享
  • 同源页面需通过localStroage检控通信,控制麻烦,复杂场景使用不方便

3.使用BroadcastChannel

BroadcastChannel 接口代理了一个命名频道,可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源2的不同浏览器窗口,Tab 页,frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件,消息可以广播到所有监听了该频道的 BroadcastChannel 对象。

list.html

const broadCastChannel = new BroadcastChannel('audio')
function showAudio(){

    if(!localStorage.getItem('hasAudio')){
        window.open('/audio.html','audio')
        localStorage.setItem('hasAudio',1)
    }

    setTimeout(()=>{
        broadCastChannel.postMessage({name:'李四'})
    },3000)

}

audio.html

window.onunload = () =>{
    localStorage.removeItem('hasAudio')
}
const app = document.getElementById('app')
const broadCastChannel = new BroadcastChannel('audio')
broadCastChannel.addEventListener('message',e=>{
    const {name} = e.data
    const app = document.getElementById('app')
    app.innerText = name
})

优点:

  • 第一次打开,之后再传参无需刷新界面重新加载资源
  • 需要共用频道的页面,通信简单

缺点:

  • 打开页面的需为同源页面2,BroadcastChannel只会向命名频道相同的同源页面发送和接收消息


链接: https://fly63.com/article/detial/3776

vue.js $emit/$on的用法和理解_vue组件之间数据传输通信

每个 Vue 实例都实现了事件接口vm.$emit( event, arg ) 触发当前实例上的事件;vm.$on( event, fn )监听event事件后运行。实例说明:Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信,Vuejs 用$emit与$on来进行跨页面之间的数据传输通信

两个浏览器窗口间通信总结

两个浏览器窗口间通信:一个窗口更新localStorage,另一个窗口监听window对象的storage事件来实现通信;所有的WebSocket都监听同一个服务器地址,利用send发送消息,利用onmessage获取消息的变化;借助iframe 或 window.open;HTML5 中的 Web Worker 可以分为两种不同线程类型

前端跨页面通信,你知道哪些方法?

在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。

Vue组件之间通信的七种方式

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。父子组件之间的通信props和$emit 父组件通过props将数据下发给props

基于 ThinkJS 的 WebSocket 通信详解

我们的项目是基于 ThinkJS + Vue 开发的,最近实现了一个多端实时同步数据的功能,所以想写一篇文章来介绍下如何在 ThinkJS 的项目中利用 WebSocket 实现多端的实时通信。ThinkJS 是基于 Koa 2 开发的企业级 Node.js 服务端框架

Socket是如何通信的?

其实服务器的处理和客户端大同小异,分三个逻辑分支:检索成功,用检索到的Socket来处理接收报文;检索失败,服务器侦听(listen)目的端口,创建全新的Socket服务客户;检索失败,服务器没有侦听目的端口,丢弃处理

vue中使用v-model完成组件间的通信

如何实现两个组件之间的双向传递呢?即,在父组件中修改了值,子组件会立即更新。在子组件中修改了值,父组件中立即更新。vue中有一个很神奇的东西叫v-model,它可以完成我们的需求。

vue父子组件通信高级用法

vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。父组件通过$refs调用子组件的方法。 以上就是父子组件通信的方式

微服务的三种通信方法

在微服务架构的世界中,我们通过一系列服务构建应用。集合中的每项服务都符合以下标准:松散耦合、可维护和可测试、可以独立部署,微服务架构中的每个服务都解决了应用中的业务问题

vue 数据通信总结

数据单向流动prop react也是一样prop ; $emit / $on (任意组件间传递)创建个空的组件,来作eventbus 用来触发及监听事件 ;vuex 牛刀集中式存储管理应用的所有组件的状态

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!