浏览器选项卡之间的通信

2024-01-27

我有一个 HTML 页面(文件主要.html) 使用 JavaScript 在同一域中打开一个新选项卡window.open("新标签页.html") method.

在新选项卡中,用户可以通过单击按钮来结束其活动。此时,我想向开启者窗口发送一条消息。我尝试使用 postMessage,但从新选项卡中我无法引用 opener。

从新标签中我想要类似的东西,但我已经“ko”

var w = window.opener;
if (w) {
    w.postMessage("hi", "http://10.150.10.43");
} else {
    alert("ko");
}

将消息从辅助选项卡/窗口发送到主选项卡/窗口(在同一域中)的最佳方式是什么?


这很奇怪。打开一个新窗口window.open("newtab.html")应该让新打开的窗口能够通过以下方式引用开启器window.opener.

无论如何,还有其他几种选项可以在同一域上的两个窗口之间进行通信。我认为以下两个是最容易实现的:

  1. Use 本地存储。如果您在新选项卡窗口中将某个键下的一些数据存储到 localStorage 中,则打开器窗口将收到存储事件。如果您使用处理程序捕获该事件,则可以从新选项卡窗口写入的 localStorage 中读取数据。请注意,仅当两个页面位于同一域中并且实际上存在两个相关窗口时才会触发事件(事件不会在写入数据的同一窗口内触发)。有关如何执行此操作的更多信息,请参阅例如:http://diveintohtml5.info/storage.html http://diveintohtml5.info/storage.html

  2. Use 共享网络工作者。 Web Worker 是一个 JS 脚本,在后台的单独线程上执行。共享 Web Worker 是一种特殊类型的 Web Worker,它允许任意数量的父文档与单个 Worker 进行通信。因此,您可以使用工作人员在打开窗口和新选项卡窗口之间中继消息。与工作人员通信的 API 与 postMessage API 非常相似。有关如何执行此操作的更多信息,请参阅例如:http://www.sitepoint.com/javascript-shared-web-workers-html5/ http://www.sitepoint.com/javascript-shared-web-workers-html5/.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

浏览器选项卡之间的通信 的相关文章

  • 如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录?

    因此 就我而言 我使用 Iframe 将 Grafana 附加到我的页面 这为我提供了漂亮且易于使用的图表 可以注意到 每次在图表上进行放大或缩小 使用鼠标单击 交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触
  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • 如何将背景图像仅应用于一个反应页面而不是整个应用程序?

    注册页面示例 register background image linear gradient to right ff5722 0 ff9800 100 margin top 150px important div div div div
  • Eclipse 选项卡宽度不变

    我浏览了一些与此相关的帖子 但它们似乎并不能帮助我解决我的问题 我有一个项目 其中 java 文件以 2 个空格的宽度缩进 我想将所有内容更改为 4 空格宽度 我尝试了 正确的缩进 选项 但当我将几行修改为 4 空格缩进时 它只是将所有内容
  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
  • Iframe 相对路径挑战

    我有一个页面 在页面内有一个 Iframe 目录如下 Folder1 Folder2 IframeCSS IframeCSS Css iframePage1 html stuff css parentPage1 html 在 iframeP
  • 如何在react-native中获取Text组件的onPress值

    我是一名新的 React Native 开发人员 我想使用 onPress 获取 Text 组件的值并将其传递给函数
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • Electron - 为什么在关闭事件时将 BrowserWindow 实例设置为 null

    The 电子文档 https electronjs org docs api browser window 提供以下代码示例来创建新窗口 const BrowserWindow require electron let win new Br
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器?

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中

随机推荐

  • VS2010图表控件:减少Y轴边距

    如何减小如下所示的左侧边距区域 标记为红色 的宽度 尝试这样的事情 Chart ChartAreas Chart ChartArea ObjectName InnerPlotPosition New System Windows Forms
  • 我可以暂时暂停 ORMLite 中自动生成的 ID 吗?

    我在我目前正在编写的一个小应用程序中使用 Android 和 ORMLite 该应用程序的目标是具有有效的导入 导出功能 为此我使用简单的 XML 框架 在某种程度上 一切都运转良好 情况如下 对象 A 包含引用对象 B 的外键 对象 B
  • 有没有办法从字符串创建 SyndicateFeed?

    我正在尝试从本地存储的 XML 数据重新创建 SyndicateFeed 对象 System ServiceModel Syndicate 如果我使用 XMLDocument 这会很容易 我会调用 LoadXml string Syndic
  • 任意长度的通用位向量类型

    出于与此处描述相同的原因 用户定义的未解释函数 https stackoverflow com questions 7740556 equivalent of define fun in z3 api 我想定义我自己的未解释函数 bvred
  • 如果下拉列表中的选择发生更改,则从工作表中删除数据

    跟进之前回答的问题 Excel VBA 基于一系列下拉列表运行宏 https stackoverflow com questions 40478350 excel vba run a macro based on a range of dr
  • 如何在不知道 setInterval() 和 setTimeOut() ID 的情况下清除它们?

    如果我不知道返回值setInterval or setTimeOut 我还能用吗clearInterveral id or clearTimeOut id 清除它们 Thanks 您可以替换原来的 setTimeout 和 setInter
  • Java - 访问控制允许来源多源域?

    所以我已经阅读了有关此问题的其他线程 但没有找到解决方案 我遇到的问题是因为我设置 access control allow methods true 我无法使用setHeader Access Control Allow Origin 我
  • C++11 成员初始化列表歧义

    由于此环境中的 GNU 标准库实现 我正在努力解决 c 11 符号解析中似乎存在歧义的问题 Arch Linux 4 2 5 1 x86 64 克 5 2 0 铿锵 3 7 0 Example include
  • 无法在 Angular JS 中使用 SmartTable 选择网格项

    我已经使用网格实现了智能表在 Angular JS 中 根据智能表文档 为了选择网格项 我们需要添加st select row row 我也加了这个 但我无法选择网格 实现的应用程序可以在 plunk 中看到 网址如下 任何人都可以帮我使用
  • 从 jQuery 调用 PHP 函数?

    我的网站上有一个 PHP 函数 需要几秒钟才能完成 这会保留整个页面 这是我不想要的 页面加载后是否可以使用 jquery 调用此 PHP 函数并将结果显示在 div 中 还要显示 ajax 加载器图像直到 PHP 函数完成 我一直在查看
  • hubris 无法安装:缺少 C 库:ruby、ruby、ruby

    我拼命尝试安装 Hubris 但每当我运行 cabal install 时安装就会失败 哈比斯链接 https github com mwotton Hubris tree master Haskell https github com m
  • Air for Android:设备警报后黑屏

    我确实有一个问题 而且没什么可继续的 我即将在三星应用商店上发布一个应用程序 使用 Air for Android As3 创建 并且刚刚得到了一份问题列表 在该应用程序经过三星工作人员测试后 才能发布该应用程序 我确实解决了几乎所有问题
  • Map和Reduce之间的主要区别

    我使用了这两种方法 但我对这两种方法的用法感到很困惑 有什么吗map可以做但是reduce不可以 反之亦然 注意 我知道如何使用这两种方法 我想知道这些方法之间的主要区别以及我们何时需要使用 Source http www globalne
  • OpenJDK 11:在 Linux 上获取 ClassNotFound,在 Windows 上运行良好

    我们有一个基于桌面的 swing 应用程序 可以在 Oracle JDK 1 8 上正常运行 迁移到 OpenJDK 11 后 我们遇到了一些未找到的类异常com sun java swing Painter 我们通过生成一个包含一些类的捆
  • 有没有办法在redis中获取客户端IP?

    我进行了网络搜索 但没有找到任何相关内容 我正在集群上运行redis 并且想找出哪台机器正在连接到redis 特别是当没有机器应该连接 但redis仍然说某些机器已连接时 提前致谢 使用 MONITOR 只会显示实际向 Redis 发送流量
  • mysql 小数点四舍五入

    我是 mysql 的新手 需要一些基本的东西 我需要像这样四舍五入小数 21 4758 应该是 21 48 0 2250 应为 0 22 23 0850 应为 23 08 22 9950 应该是 22 99 我尝试了很多事情但没能成功 Th
  • 在Python中处理从源目录到目标目录的一组文件

    Being 全新的在 python 中 我试图对 python 中的一组文件运行命令 该命令需要源文件和目标文件 我实际上使用的是 imagemagickconvert如下例所示 我可以提供源目录和目标目录 但是我不知道如何轻松保留从源目录
  • 为什么允许使用子类的构造函数实例化父类对象?

    考虑以下 public class parent int x parent x 5 public class child extends parent int y child super y 10 public static void ma
  • Android Rss 图片问题

    大家好 我对 Android 开发比较陌生 正在为新闻网站创建 RSS 阅读器 我遇到的问题是我想要获取图像的 rss feed 的网站的类型为 我为 android 上的代码所做的是 2 个类 RssItem 和 RssItem Disp
  • 浏览器选项卡之间的通信

    我有一个 HTML 页面 文件主要 html 使用 JavaScript 在同一域中打开一个新选项卡window open 新标签页 html method 在新选项卡中 用户可以通过单击按钮来结束其活动 此时 我想向开启者窗口发送一条消息