具体情况是这样的, 我写了个主网页布局, 顶部是导航菜单, 左侧是二级导航菜单, 右侧是内容, 左侧导航菜单有两个。 我要实现点击导航菜单,弹出对应的二级菜单, 并在右侧内容显示相应的网页; 点击左侧菜单选项,也可以在右侧内容显示相应网页。
由于左侧菜单有两个,而且子选项很多, 这样加载速度慢, 所以我分别写进两个网页,然后根据判断加载进主网页中。 为此, 左侧菜单和右侧内容各在一个iframe中。
问题来了, 二者怎么交互?
我想到了parent方法, 即在左侧菜单的脚本中通过parent来访问主网页的右侧内容, 但这个方法仅被IE10和FF支持。 百度上列出几种, 我看到了cookie. 它可以帮助浏览器记录用户信息, 而且可以被JS操作。 一个新思路出来了, 既然浏览器可以通过cookie记录信息,我可以用cookie记录左侧选项点击时对应选项的序号(这个动作写进左侧选项的点击事件中 ),有两个,一个是当前点击的,另一个是上次点击的。 然后, 再写个监听函数,200ms执行一次,每次判断cookie中的两个序号是否相同,如果不同, 说明左侧有新选项被点击, 则修改右侧网页地址, 然后把cookie中的两个序号修改成一致; 否则,不做处理。
编完后,会发现还是不行,原因是cookie在服务器环境下可以工作。 所以我把网站搭载在IIS下,okay.
整个过程中需要注意的是cookie的值设定, cookie="value1=1;value2=2" 错误, cookie="value1=1", cookie = "value2=2" 正确 。