前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >同域的页面间传递数据的方法汇总

同域的页面间传递数据的方法汇总

作者头像
前端GoGoGo
发布2018-08-24 15:12:34
9390
发布2018-08-24 15:12:34
举报
文章被收录于专栏:九彩拼盘的叨叨叨

同域指页面URL的协议,端口号和host(document.domain)一样。

方法1:用 postMessage

两个页面需要如果存在如下两种关系之一,才可以用 postMessage 来传递数据。

  • 关系1: 页面1 用 window.open 打开 页面2
  • 关系2: 页面1 有 iframe,iframe的地址为页面2

原理是: 可以用 targetWindow.postMessage 向目标页面发数据,页面可以监听 onmessage 事件来接收其他页面发的数据。

实现如下, 页面1

代码语言:javascript
复制
var popup = window.open('page2.html') // 关系1
var iframe = window.frames[0] // 关系2

popup.postMessage('向页面2发的数据', '*')
iframe.postMessage('向页面2发的数据', '*')

// 接收页面2发送的数据
window.addEventListener("message", function(event) {
  event.data // 收到的页面2发送的数据
})

页面2

代码语言:javascript
复制
window.addEventListener("message", function(event) {
  event.data // 页面1发送的数据
  event.source.postMessage('向页面1发的数据', '*')
}, false)

更详细的描述见这里

方法2:监视 window.name 的变化

两个页面需要如果存在用 postMessage 一样的关系。才可以用监视 window.name 的变化来传递数据。

原理是:满足上面关系的页面可以修改打开各自 window 的 name 值,通过修改 name 值来传递数据。

实现如下, 页面1

代码语言:javascript
复制
popup.name =  '向页面2发的数据'
iframe.name = '向页面2发的数据'

页面2

代码语言:javascript
复制
setInterval(function(){
  window.name  // 页面1发送的数据
  var sourceWindow = window.opener || window.top
  sourceWindow.name = '向页面1发的数据'
}, 2000)

方法3:监视 webStroge 的变化

原理是,当某个页面的webStroge的值发生变化后,会触发其他页面的 onstorage 事件。

实现如下, 页面1

代码语言:javascript
复制
localStorage.setItem('xx-item', '向页面2发的数据')

window.addEventListener('storage', function(){
  localStorage.getItem('xx-item2') // 收到的页面2发送的数据
}, false)

页面2

代码语言:javascript
复制
localStorage.setItem('xx-item2', '向页面1发的数据')

window.addEventListener('storage', function(){
  localStorage.getItem('xx-item') // 收到的页面1发送的数据
}, false)

更详细的描述见这里

方法4:借助服务器

用 WebSocket 或 通过某个接口来修改数据,通过某个接口来获得数据。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.06.08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 方法1:用 postMessage
  • 方法2:监视 window.name 的变化
  • 方法3:监视 webStroge 的变化
  • 方法4:借助服务器
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档