现象
非body滚动条且滚动值不为0时。鼠标放在“北京西站”滚动缩放时,滚动后鼠标下的位置变为“xx公园”处了(正常应该还是在“北京西站位置”)
原因
百度地图计算时直接取了 window.scrollY
的值用作计算,未考虑在其他元素内滚动的情况。
问题模块:百度地图主js会动态加载其他模块的js,并存放在 localStorage 中,出问题的就在这个模块
问题就在如下代码
f = a.clientY + window.scrollY;
解决方式
出问题的oppc模块是主js动态请求加载回来的。那就在加载的位置对oppc模块修复后再执行原有的流程,
发现_jsload2
挂在window上。直接覆盖原有方法即可
// fix-bmap-bug.js 将此js放在加载百度地图js的前面执行即可
function fixBmapScaleBug(){
var _jsload2 = window._jsload2;
window._jsload2 = function(a,b){
var getPScroll = `function getPScroll(c){
return c===document.documentElement?window.scrollY: (c.parentNode.scrollTop || getPScroll(c.parentNode))
}`;
// 当a为 oppc 模块时,写入前改写 window.scrollY 父元素滚动条的值
if(a==='oppc'){
b = getPScroll + b.replace('window.scrollY', 'getPScroll(g.cb)');
}
_jsload2(a,b)
}
}
使用方式
tips: 如果未生效,请删除localStorage内容后再试,因为如果localStorage有了是不会再次加载的
// html
<script type="text/javascript" src="fix-bmap-bug.js路径"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密钥&callback=fixBmapScaleBug"></script>
解决过程
思路1 官方能力
想通过api提供的能力解决,翻阅官网api,发现相关的只有如下几个方法,都无法解决问题
//事件
zoomstart、zoomend
//方法
centerAndZoom(center: [Point](https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a1b0), zoom: Number)
思路2 修改源码
1、阅读压缩文件全靠检索
由于js都是压缩后的,在chrome source面板下使用 pretty print 后勉强能看。查阅网上各种说法和实际现象,问题应该就是取滚动条的值时直接取了最外层body的(body下滚动条没问题)。
2、关键词大法
通过关键词检索 scrollTop zoom 等,检索到这个地方有使用,为了方便调试,下载了 fiddler拦截 api的js并用本地文件代替。在如下地方都加上 debugger 。然后在页面进行缩放操作。结果.... 根本就没执行到
此时陷入僵局,同样方法将 document body相关的地方都测试了,没有进展
3、关键词大法+调用栈
想到前面搜索到的缩放事件,于是用事件zoomstart、zoomend
关键词检索并看代码,将相关的地方都打上断点,缩放时查看断点调用栈,发现4949有个调用栈进到了一个临时js(VM126750)中。
说明缩放操作真正的逻辑可能在这个js中,然后在这个js中按原来的思路通过 scrollTop scrollY window 等关键词检索查阅。于是找到了可疑的地方,打上断点并缩放操作,发现确实执行到了这里
4、验证可疑点
于是在断点时执行到139行。手动获取滚动条scrollTop并将值累加到f
变量上。发现这样操作后缩放就正常的。基本确定就是这行代码取值的问题。
5、如何修复
确定了问题点出在此处,要修复就要纠正这个代码块。那它是哪里来的呢?
这种临时文件格式的js一般都是 eval 得来的。于是在主js文件里面以 eval 关键词搜索,发现果真有且只有一行代码有eval。打上断点,看看eval 参数来源在哪里?通过临时文件内容确定了是 oppc模块的内容
老规矩,查调用栈,发现调用者是这里
再往前查,是这个
看文件来源,是一个请求返回的js。也就是说这个临时文件是主文件通过请求异步加载并执行的。
通过查看
_jsload2
逻辑,是将加载的js先存入localStorage中,然后用 eval 方法执行。7、修复
确定了来源,要解决只需要对加载回来的字符串js修复问题后再执行原来的流程就可以了。
可以看到
_jsload2
挂在window上。于是想到覆盖_jsload2
方法,并将原来的_jsload2
方法存储,对js内容处理后再调用原来的_jsload2
处理即可。于是加了一个js(fix-bmap-bug.js 内容见解决方式节
)在主js回调函数执行,用于覆盖_jsload2