Question

已经阅读了很多与我想做的事情有关的帖子，我敢肯定这是不可能的，但是我还是会问这个问题，希望有人可能已经解决了这个问题，或者可以指出我的想法。正确的解决方案方向。

我有一个复杂的PHP / MySQL Web应用程序，希望将浏览器选项卡/窗口保持独立。例如用户可以在一个选项卡中对数据库进行搜索，而在另一个选项卡中进行另一项搜索，并且在执行搜索时设置和存储的各种参数仅链接到相关的浏览器选项卡。重新加载选项卡或在搜索中进一步移动（分页系统限制了存储结果的数量）不会干扰其他搜索选项卡，仅使用当前选项卡标识的参数。

我的想法是将搜索和其他与浏览器选项卡相关的参数存储在数据库表中，该表由一些与该选项卡绑定的唯一标识符键控。

我不能使用PHP会话，因为这些会话在选项卡之间很常见。作为服务器端的PHP，不知道请求来自哪个选项卡/窗口。 Cookie（如会话）在所有标签中都很常见。

用于跟踪不同选项卡/窗口的解决方案似乎是javascript的sessionStorage，乍一看似乎很理想–我可以设置一个对浏览器选项卡唯一的js会话，并将其回显到PHP脚本，并且在在每个标签中，我都可以设置并保持独立的值。但是，我需要将该js会话值分配给PHP变量，并且该值必须在运行PHP脚本的搜索部分之前可用。除了加载URL，用户方面没有其他互动（即，没有表单提交等）。

我遇到过建议使用AJAX / JQuery的解决方案，但是在PHP脚本运行后，所有这些都需要一种形式和某种类型的用户交互，并且我看到的大多数示例都写入了div的innerHtml。这些都没有实现我想要的。

最近，我一直想通过网关URL解析应用程序的每个页面的想法，该网关URL只需加载创建js会话的javascript脚本（如果尚未创建），然后使用重定向到实际的PHP脚本作为查询字符串一部分的唯一标识符。但这似乎涉及不必要的开销。

任何建议甚至解决方案都将不胜感激。

–––>

响应ADyson（因为注释框太短）：

应用程序在这里：https://testdrive.wikindx.com/

是供学术/研究学生管理参考资料。它们都以不同的方式工作，包括有些人喜欢打开多个选项卡进行不同的搜索，这就是问题所在。例如，每次搜索都会生成返回显示在网页上的结果，以及其他信息，例如搜索参数（供参考）。分页系统（即每页显示10个结果）经过精心设计，以便转到下一页使用更快，更有效的SQL调用-所有繁重的工作都在初始搜索中完成。搜索参数和摘要结果/总计在第一次调用时完成，这些参数和核心SQL子查询必须保存在某个位置。基本上，在搜索的不同页面上共有的数据必须存储在某个位置，并且在该浏览器选项卡中对于该搜索是唯一的。

Answer 1

选项卡URL的某些内容必须唯一。互联网是无状态的，因此浏览器在刷新后不知道是选项卡一还是选项卡二，除非URL指示是这样。

如果选项卡URL中有一个标识符，例如数字或哈希，则可以使用该标识符来保存会话并从会话中返回特定信息：

$_SESSION['tabs'][0]等

因此，启动新标签页/搜索将需要您跟踪并增加用户的标签页ID：

$tabID = sizeof($_SESSION['tabs']);或使用一些随机哈希生成器。

您已经提到过使用ajax，这也是一种可能的选择。这样，您可以将标识符存储在网址#tab-1的哈希中，否则可以使用相同的网址。然后，您需要使用javascript从选项卡的哈希中获取标识符，并通过ajax发送包含该标识符的请求，以要求服务器（PHP）为您生成与之匹配的特定搜索结果/页面，然后您可以使用它来填充页面。

Answer 2

这是我的解决方案。它使用javascript检查选项卡/窗口是否存在唯一ID，并使用sessionStorage存储该唯一ID。我还没有测试过，如果用户使用的旧浏览器不使用sessionStorage，我的应用程序仍然可以正常工作-目前可以在Firefox，Safari和Chrome浏览器中使用。

我的index.php的业务端。一旦完成一些基本环境配置（这是WIKINDX_URL_BASE等的来源），则javascript是第二件事：

/**
  * Generate/return the unique browser tab/window identifier
  */
$script = WIKINDX_URL_BASE . '/gatekeeper.js?ver=' . WIKINDX_PUBLIC_VERSION;
$qs = $_SERVER['QUERY_STRING'] ? '?' . $_SERVER['QUERY_STRING'] : FALSE;
$url = WIKINDX_URL_BASE . '/index.php' . $qs;
if (!array_key_exists('browserTabID', $_GET)) {
// go into gatekeeper for a redirect and addition of a browserTabID to the querystring
print <<< END
<script src="$script"></script>
<script>redirectSet("$url", "$qs")</script>
END;
}
else {
// go into gatekeeper to check if browserTabID is unique to the tab (perhaps user has `opened link with browserTabID in a new tab/window)`
$id = $_GET['browserTabID'];
print <<< END
<script src="$script"></script>
<script>getBrowserTabID("$url", "$qs", "$id")</script>
END;
}

还有我的gateway.js：

// gatekeeper.js
/**
 * No browserTabID yet set so generate one and redirect
 */
function redirectSet(url, qs)
{
    var browserTabID;
    if ((sessionStorage.getItem('browserTabID') == null) || !sessionStorage.getItem('browserTabID')) {
        browserTabID = uuidv4();
        sessionStorage.setItem('browserTabID', browserTabID);
    } else { // This shouldn't be necessary but is here for completeness. Perhaps of use in the future . . .
        browserTabID = sessionStorage.getItem('browserTabID');
    }
    if (qs) {
        url = url + '&browserTabID=' + browserTabID;
    } else {
        url = url + '?browserTabID=' + browserTabID;
    }
    window.location.href = url;
}

/**
 * browserTabID in the URL. 
 * If the same as the session, URL is opened in existing tab/window so return doing nothing.
 * If not the same as the session (session is null probably), URL is opened in a new tab/window so generate browserTabID and redirect
 */
function getBrowserTabID(url, qs, browserTabID)
{
    if (browserTabID == sessionStorage.getItem('browserTabID')) { // Continuing in same tab/window
        return;
    }
// User has opened a link in a new tab/window – generate a new ID
    browserTabID = uuidv4();
    sessionStorage.setItem('browserTabID', browserTabID);
    if (qs) {
        url = url + '&browserTabID=' + browserTabID;
    } else {
        url = url + '?browserTabID=' + browserTabID;
    }
    window.location.href = url;
}

/**
 * Code from https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid
*/
function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

代码在index.php中运行后，我便可以访问$ _GET ['browserTabID']，然后可以使用它访问数据库表行。

标记

如何使浏览器标签在PHP中保持独立

2 个答案: