前端js使用location.href下属性产生bug问题记录

 

近期参与老项目发现一个jsp的bug，涉及页面jsp（jsp在更外层页面的iframe中），具有四个tab页面，虽然默认跳转页面是第一个tab，但是也存在其他页面跳转时进入其他tab的情况，因此对各tab页面设定相应id对应，跳转时通过参数flag传入jsp，告知显示的tab。

发现的bug是，某一个tab页面存在“修改后返回该tab页”的需求，因此同事使用了location.href来设定要“返回”的页面并通过flag设定了该tab（假设是tab1），问题就在这。结果导致：当页面返回后，手动点击其他tab（假设tab2），并在对应tab2下的链接进入底层详情页面再点击其中“返回”按键，会返回到tab1。注：tab1、tab2其实都是一个jsp大页面，只是tab不同。

第一反应是大jsp页面的js有问题。但是梳理后感觉不能够。于是回到链接参数问题上，将iframe下大jsp的跳转链接单独打开页面查看network，果然有问题。排查发现，返回tab1的链接的确对应tab1的flag，那么该jsp大页面无误，原因在于跳转前对跳转链接中flag对设定，有问题。

分析“设定flag的页面”后发现，实际上，在tab1中对修改页面的“返回”，使用了location.href，则使得修改后直接改变了该值，但是tab2使用了history.go(-1)。当location.href改变后，用户在jsp中点击其他tab，对应url依然是tab1的flag，于是history.go(-1)回到大jsp时就是一个携有特定flag的链接并按照jsp的js规则回到了tab1。

综上，应尽量使用history.go(-1)，避免location.href乱用，尤其是iframe中，一开始还以为是jsp的js逻辑有误。