网站中做一个标签页类似于打开浏览器新窗口的功能性问题

Question

功能要求：
    点击左边的二级菜单，相应的在右边iframe窗体加载页面，同时在标签页部分生成一个与菜单名相对应的标签
我的思路是：
    当点击一个二级菜单的时候把菜单名称和uri以序列化以下标值为zk保存在cookie，然后那个标签部是个公共部分，直接读取cookie里面的的zk值就好了。
    但是呢，这样有个问题，就是当我每次点击不同的二级菜单的时候，都要更新我的zk值，先删除zk，然后再把组装好的二级菜单序列化存在cookie中，读取的时候循环遍历出来。
    可能是因为cookie写入比较慢的缘故吧，我在点击二级菜单并打开网页的时候，取出的zk值还是读取的上一次的值，里面并没有包含我当前点击的二级菜单名称？请问这样该如何更正或者优化？

有更好的方案也可以一起探讨一下

Answer 1

我之前正好写过这个东西，不过和你的稍微有点不同，你只有一个iframe，而我当时设计的是右边有多个iframe，通过隐藏，显示来切换页面。这样子切换的时候，就不需要页面刷新，当然不好的一点就是页面上的内容太多，不过我没有体验到什么卡顿。

首先要考虑一个问题，是否支持一个菜单在右侧打开多个tab，这个可能稍微有点区别。

你的思路我没看明白，只说说我的思路：
假设一个二级菜单，在右侧只支持一个tab。按照你的只有一个iframe的要求。

1. 把菜单的url以data的形式记录在dom上面，比如<a href="javascript:;" data-url="blabla" data-name="部门管理">部门管理</a>

2. 当点击二级菜单的时候，active这个按钮，生成一个uuid，添加到菜单上面，便于以后查找

3. 在右侧的tab列表里面添加一个tab，也同时加上这个uuid，把内容修改为获取的name

4. 获取url, 修改iframe的url，切换到新页面

5. 在代码里记录这个菜单的数据，大概格式这样子的： { uuid: { uuid, url, menuDom, tabDom, name} }

6. 当点击左侧菜单的时候，先检查是否有uuid这个数据，如果没有，重复第2步。如果有uuid了，那么就根据数据，获取对应的tabDom和url，把tabDOM设置为active，同时改变url

7. 当点击tab的时候，获取uuid，然后根据数据，修改左侧菜单的active，同时改变url

8. 当关闭tab的时候，清除menuDom的uuid数据，删除tabDom，修改url，删除对应的数据

差不多简单的就这样子，进阶一点的还考虑：

1. 关闭tab以后，iframe显示哪个页面？我的做法是用一个array保存uuid来记录页面打开的顺序，如果当前tab关闭，那么切换到上一个打开的当前存在的页面。

2. 当tab过多，上面的菜单栏放不下怎么办？我的做法是加一个左右按钮。当放不下的时候，显示按钮，来让菜单左右滑动。也有些人把多余的菜单放到一个下拉菜单里，感觉都可以。