当前位置: 首页 > 网络应用技术

浏览器选项卡交互式技术解决方案(JS)

时间:2023-03-08 10:53:55 网络应用技术

  在日常业务发展中,经常会遇到这样的场景:浏览器选项卡之间的通信互动。

  例如,有一个页面,单击列表中的每个数据,数据的页面由新的浏览器选项卡页面显示;

  编辑后,您可以通过单击右上角的按钮输入并通知更新列表数据的续订来关闭当前页面。

  在这里,涉及两个互动:

  下面,让我们一起看实施过程。

  首先,让我们看一下如何在两个选项卡之间进行通信,也就是说,如何让通知在关闭后进行更新。

  我们定义两页:和谐。

  页面上有一个打开按钮:

  页面上有一个返回按钮:

  单击点击中的按钮时,我希望在页面中收到通知。

  在两页同源性的情况下,可以在帮助下实现。

  通常,我们用作本地数据存储。除此功能外,它还提供了监视事件,以监视数据中数据的更改。

  因此,我们可以:在单击时为中间设置一个数据,您可以收听此数据以进行更新处理。

  具体实现如下:

  单击右上角的更新按钮后,我们希望关闭页面并返回页面。

  如何关闭当前标签?

  实际上,浏览器的全局对象提供了此方法:。

  但是,这种方法有生效的先决条件:当前页面必须通过pop -up窗口打开,例如打开当前页面。

  如果您在非pop -up -up窗口中打开它(直接在地址栏中复制链接),则在调用时会在控制台上看到以下警告:

  上面的单击按钮打开,因此在中间添加闭合逻辑可以生效:

  因此,如何处理非Pop -up Windows?我们可以选择此方案:使用重定向方法打开页面上的页面。

  那么,如何判断当前页面是否已打开?

  它可以通过变量解决。

  如果新的选项卡页面由当前页面打开,则指向当前页面,也就是说。

  如果未通过方式打开“新标签”页面,则为空。

  我们将逻辑重写如下:

  实际上,上述关闭时可能存在问题。选项卡页面之间可能还有其他页面。关闭后,未打开“选项卡”页面。

  如何实现这种逻辑?

  实际上,除了使用第一个参数传输打开页面外,第二个参数还可以打开现有的选项卡页面。

  我们在页面上设置它的属性:

  在页面中,您可以通过打开标签进行切换。

  可能会有这样的场景:页面打开页面后,它将首先关闭,然后单击以关闭当前页面。

  目前,每个人都可能会想到结论:当点击更新时,它也已关闭,但尚未实现。回到这个场景。

  幸运的是,如果关闭它,它将以零为中间的空置,因此它将达到页面逻辑。

  但是,如果在当前选项卡页面中存在,则将通过复制链接在浏览器URL地址栏中打开它,该链接将无法关闭,因为它没有在pop -up窗口中打开。

  谢谢您的阅读。如果您有任何缺点,请纠正我。

  原始:https://juejin.cn/post/7099805954488664100