如何检查 web 页面是否打开？

Question

我有一个网站，用户通过另一个网站互相发送消息。 我的问题是每次用户单击消息项时，此操作都会打开一个新选项卡。

进行大量对话会使这很烦人，尤其是在智能手机上使用时。

有什么方法可以检查发短信的网站是否打开？

Answer 1

如果您使用的是 window.open() 您可以添加目标参数。

一个字符串，没有空格，指定资源正在加载到的浏览上下文的名称。 如果名称不能识别现有上下文，则会创建一个新上下文并赋予指定的名称。 也可以使用特殊目标关键字_self、_blank、_parent 和_top。

例子

window.open("https://www.mozilla.org/", "mozillaTab");

我希望它可以帮助你:)

Answer 2

您正在寻找postMessage 。 突触：

postMessage(message, targetOrigin, transfer)

• message是您要发送的实际消息
• targetOrigin指定哪个域是目标
• transfer是与消息一起传输的一系列可转移对象

所以，你真正想要的是进行这样的对话：

• 第1页：你在吗？
• 第2页：是的

或者

• 第1页：你在吗？
• ... （暂停）

我将把 Page2 称为我们想知道其存在的页面，并将 Page1 称为想知道 Page2 存在的页面。

首先，您需要在 Page1 和 Page2 上都有一个消息处理程序。 突触：

window.addEventListener("message", (event) => {
  if (event.origin !== "http://example.org:8080")
    return;

  //check event.data and see what happens
}, false);

在第 2 页，您的消息处理程序将需要检查消息是否询问其存在并调用postMessage('Yes, I am here', event.origin); 如果是这样。 另一方面，Page1 通过调用postMessage('Are you there?', theurl);来启动消息传递。 （您需要用您的值替换theurl ）。 现在，Page1 需要一条消息。 如果消息到达，则 Page2 存在。 如果没有，那么在超时后您需要处理 Page2 的不存在。 所以，你会在第 1 页有这样的东西：

var wasFound = false;
postMessage('Are you there', theurl);
setTimeout(function() {
    if (!wasFound) {
        //The page needs to be opened
    }
}, 500);

自然，当您收到来自 Page2 的消息时，您需要将wasFound设置为 true，并且您需要确保消息处理程序看到与您的timeout检查相同的wasFound变量。