我有一个带有侧面菜单的网站,允许用户单击此菜单中的链接,然后该链接在iframe中打开。当用户单击另一个菜单选项时,它随后将该菜单的选择iframe源启动到单独的选项卡中,依此类推。所以基本上现在,我有了菜单选项“ A”的原始选项卡-iframe src = "https://example.com?mo=a"
和菜单选项“ B”的第二个选项卡-iframe src = "https://example.com?mo=b"
我不确定是一种确定当前为此站点打开的选项卡的方法,因为用户可以从任何现有的打开的站点选项卡中将其他菜单选项启动到新选项卡中。
我需要一种方法来检查打开了哪些选项卡以及每个选项卡中的iframe源,因为我希望防止用户多次打开同一菜单选项。例如,从菜单选项“ B”选项卡中,用户可以单击已经打开的菜单选项“ A”,因此想直接转到该选项卡。
我还需要一种检查选项卡何时关闭的方法,然后该选项卡应该会出现在打开的选项卡清单中。
我调查了localStorage
和sessionStorage
在标签之间传递信息,但只有localStorage
可以做到,但不确定如何跟踪。
到目前为止,我尝试过的操作如下:
let srcName = menu-option-clicked-val; // menuA
let src = $('#my-iframe-id').attr('src'); // https://example.com?mo=a
localStorage.setItem(srcName, src);
因此,基本上,单击菜单选项后,我将检查是否已使用localStorage
将其存储在localStorage.getItem(srcName)
中
除此之外,我还需要知道用户何时关闭标签页,以便随后我也可以从localStorage
删除该标签页条目。
我还考虑过以某种方式打开标签页来跟踪此信息。这可能吗?