javascript - 页面中特定操作的 URL

Question

我有这样的页面流程

1. 用户登陆着陆页。
2. 然后选择一些选择框，然后点击搜索。
3. 然后将进入包含所有搜索条件并显示搜索结果的新页面。
4. 在此页面中，我们有左侧部分显示所有结果，当用户点击任何结果项时，我们会在右侧显示结果详细信息。

这一切都很好。但现在客户想要打开部分的可书签链接，即当使用单击左侧 div 时，右侧 div 应打开，并且应具有正确的 url，以便可以共享。

如何实现这一点，为打开的 div 制作 url？我尝试了 #id=1002 一切正常，但是当用户复制 url 并粘贴时，java 无法获取哈希标签。

Answer 1

这是其中之一。 -- 编码和映射 URL，然后在 javascript 中处理它们。

让我解释一下。

例如，您有 2 个 div -- div1、div2

(1) 编写并创建映射逻辑/约定 ---

将 div 的状态映射到 URL --

div1 打开 div2 关闭 --> URL = mysite.com/page/d1-open/d2-close

div1 打开 div2 打开 --> URL = mysite.com/page/d1-open/d2-open

div1 关闭 div2 打开 --> URL = mysite.com/page/d1-close/d2-open

div1 关闭 div2 关闭 --> URL = mysite.com/page/d1-close/d2-close

等等

(2) 在服务器处处理 URL --- 只需发送 mysite.com/page 的输出即可，忽略其余部分

(3) 在客户端处理 URL ---

类似这样的事情

    function handleURL() {
    var myURL = window.location.href;   
    var urlArray = myURL.split("/");
    //examine the urlArray and decode the URL code after mysite.com/page/
    // and open or close your divs accordingly
    // eg: if the url-part after page/ is div1-open/div2-close 
    // i.e urlArray[2]=div1-open and urlArray[3]=div2-close 
    // you would know what to do accordingly...
    }

我向您解释的示例几乎无法扩展。您必须为 n div 的每个组合手动提出 2^n 映射。但是，如果确实希望使其可扩展，您也可以自动化编码。

您可以为页面的每个状态分配一个唯一的 ID。

例如:mysite.com/mypage/page-config-id=abcd1

然后你向服务器询问 div 配置即哪个 div 打开、哪个 div 关闭等(作为 JSON)。然后您可以使用 Javascript 解析 JSON 并重新排列页面。

您可以将 div config --> page-config-id 键值对存储在服务器上的数据库或文件或 noSQL 或其他任何形式的键值数据库中。