js页面间通信方法实现
在写页面的时候经常会碰到这样的需求:需要两个打开着的页面间传递数据或者事件。
比如:已有列表页A,通过A打开详情B进行编辑;编辑保存之后希望A能自动刷新页面。这个时候就可以用到“storage”事件。关于localStorage的用法可在其他地方找到。
可触发“storage”事件的条件如下:
同一个浏览器打开了多个同源的页面(URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源);
一个网页中修改localStorage;
另一个网页注册了storage事件。
http://www.cnblogs.cn/demo/index.html//这个网址,协议是http://域名是www.cnblogs.cn,端口是80(默认端口可以省略)//对比URL: http://www.cnblogs.cn/demo2/other.html //同源 http://www.cnblogs.cn:81/demo/index.html //不同源 http://sxh.cnblogs.cn/demo/index.html //不同源 http://www.pudn.cn/demo/index.html //不同源
在测试的时候,一定要保证是同源页面。
下面是页面间交互代码,实现非常简单,pageA和pageB之间通信。
pageA:添加“storage”监听
<!DOCTYPE html><html><head><title>page A</title></head><body><script>window.addEventListener("storage", function (e) {console.log(e)console.log(e.newValue)});</script></body></html>
pageB:设置localStorage
<!DOCTYPE html><html><head><title>page B</title></head><body><button>click<button></body><script>document.querySelector('button').onclick = function(){//留意random,若Refresh的值未做变更,则不会触发A页面的“storage”事件localStorage.setItem('Refresh', Math.random()*10);}</script></html>
转载于:https://www.cnblogs.com/zran/p/11428158.html
js页面间通信方法实现相关推荐
- 微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
- iframe父子页面间通信总结
随着网页结构的复杂化,页面内嵌frame越来越常见,但不管是作为内容页来显示,还是作为组件模块嵌入,都有父子页面间通信的需求可能,因此为了更好的实现需求就必须了解父子页面间的通信. iframe子页面 ...
- 【愚公系列】2022年02月 微信小程序-页面间通信
文章目录 前言 1.页面通信分类 一.GET类通信 二.POST类通信 三.localStorage通信 四.全局参数通信 五.发布订阅中间件 六.oba开源库 七.hack方法 总结 前言 在小程序 ...
- 如何实现electron多页面间通信
如何实现electron多页面间通信 1,业务需求: 总共有两个页面,页面A显示数据,页面B处理数据,主线程Main 2,实现的技术方案: 在主线程中打开页面A和B,B页面不进行显示,主要负责处理从A ...
- Vue 组件间通信方法汇总
Vue 组件间通信方法汇总 ⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌 订阅 除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间 ...
- js 页面跳转方法 当前页与新增页面
js 页面跳转方法 open('http://www.baidu.com'); //页面跳转打开一个新的页面close() //关闭当前页面location.href //可以进行页面跳转当前网页直接 ...
- java 页面之间传值_JSP页面间传值方法
JSP页面间传值方法[@more@] a:最常用的方法是用form中的text, ,然后在b.jsp页面中这样获取 String username=request.getParameter(" ...
- 微信小程序-页面间通信
当前测试的基础库版本为 2.17.0 页面分类 tabBar 页面 - app.json中配置的 tabBar 页面 page 页面 - 其他的 非tabBar 页面,后面称为 page 页面 跳转页 ...
- ASP.NET十分有用的页面间传值方法(转)
一.目前在ASP.NET中页面传值共有这么几种方式: 1.表单提交 <form action= "target.aspx" method = "post&qu ...
- python线程间通信方法之Event
最近写程序要用到线程间通信,在网上搜了些资料,测试了一下代码,在这里总结一下. Python实现线程间通信有几种方法,在这里介绍Event对象. Event对象实现了简单的线程通信机制,它提供了设置信 ...
最新文章
- Ransomware CryptXXX Analysis
- 【Linux系统编程应用】 Linux输入子系统(二)
- 3测试图片显示置信度_云上的移动性能测试平台
- Hadoop学习总结:Map-Reduce入门
- 荣耀V40渲染图曝光 将搭载双曲面瀑布屏
- 幸福的源泉:Life is about choices 幸福可以选择
- 安装Python3.8.8
- java实现fp-growth算法
- Provisional headers are shown axios 超时处理
- 【汇编程序】实现输出2012-2100年之间所有闰年
- 百度搜索开放平台,百度搜索api
- 推荐几个做自媒体好用的电影素材网站
- vulfocus靶场进不去
- 简述DDNS和DNS区别
- qdialog 只有点击才能获得焦点_盘点那些只有在校学生才能获得的教育专属优惠产品。...
- 红旗linux软件下载,红旗linux操作系统下载
- [附源码]计算机毕业设计Python高血压分析平台(程序+源码+LW文档)
- 北京-易联达面试题(答案在下面)
- 勘智K210-打包Kfpkg固件及其使用
- 恶意文件 大数据案例库_数据恢复必备神器!硬盘深度恢复,大文件恢复—DiskGenius专业版电脑软件...