js页面间通信方法实现

最新推荐文章于 2024-07-03 15:34:20 发布

qq_50737627

最新推荐文章于 2024-07-03 15:34:20 发布

阅读量980

点赞数

分类专栏： javascripe 文章标签： javascript 前端

原文链接：https://www.cnblogs.com/zran/p/11428158.html

版权

javascripe 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在写页面的时候经常会碰到这样的需求：需要两个打开着的页面间传递数据或者事件。

比如：已有列表页A，通过A打开详情B进行编辑；编辑保存之后希望A能自动刷新页面。这个时候就可以用到“storage”事件。关于localStorage的用法可在其他地方找到。

可触发“storage”事件的条件如下：

同一个浏览器打开了多个同源的页面（URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源）；

一个网页中修改localStorage；

另一个网页注册了storage事件。

在测试的时候，一定要保证是同源页面。
　　下面是页面间交互代码，实现非常简单，pageA和pageB之间通信。
pageA：添加“storage”监听

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>