有个管理系统项目使用Layui
开发的前端,由于出现该报错引发了一个奇怪的BUG,最后采用简单的做法解决了。
原功能大概是使用Layui的面包屑实现了菜单导航功能,BUG现象可概括为:上级面包屑页面报错,导致下级面包屑页面无法关闭。
BUG复现流程:
进度管理(上传)
的菜单,出现名为进度管理(上传)(督办)
的面包屑,此时控制台(console
)中出现报错信息;进度管理(上传)(督办)
菜单页中,打开其二级页面,出现二级页面面包屑(暂且命名为二级页面
),正常且无报错;二级页面
的关闭按钮,想要关闭该页面,此时控制台(console
)中再次出现报错信息,且页面无法关闭!javascriptjquery-3.3.1.min.js:2 Uncaught Error: Syntax error, unrecognized expression: iframe[data-frameid=进度管理(上传)(督办)]
at oe.error (jquery-3.3.1.min.js:2:12961)
at oe.tokenize (jquery-3.3.1.min.js:2:18943)
at oe.select (jquery-3.3.1.min.js:2:21833)
at Function.oe [as find] (jquery-3.3.1.min.js:2:6808)
at w.fn.init.find (jquery-3.3.1.min.js:2:24400)
at w.fn.init (jquery-3.3.1.min.js:2:24889)
at w (jquery-3.3.1.min.js:2:896)
at HTMLLIElement.<anonymous> (head.js:122:13)
at Function.s (layui.js:2:7068)
at r.each (layui.js:2:6420)
思路:
按照正常的问题排查思路,是根据报错信息找到报错代码,然后针对报错代码进行解决。
但此报错信息无法直接找到报错代码文件和行数。
唯一出现的与项目代码有关的内容就是进度管理(上传)(督办)
,所以需要先找到代码中什么地方有该部分内容的使用。
按照上面的思路发现,生成面包屑时将进度管理(上传)(督办)
即作为面包屑的显示名称,也作为了面包屑的id
,所以报错内容有data-frameid
。
再结合报错信息 Uncaught Error: Syntax error, unrecognized expression
,翻译过来就是:未捕获错误:语法错误,无法识别的表达式。
通过以上思路,可以猜到报错原因就是与进度管理(上传)(督办)
内容有关。该内容有什么问题呢?结合其他功能菜单测试分析,不难猜到与括号()
有关,所以最简单的解决思路(不推荐)就有了:不使用英文括号()
。
其实如果你有比较好的编程习惯,大概率不会遇到这个报错吧,因为你大概率不会使用中文作为任何东西的ID吧。如果你的编程习惯再好点,ID大概率也不会出现特殊符号吧。
所以我推荐解决方案是:不要使用 中文 和 特殊符号 作为面包屑的ID。具体的解决方式就由各位自己动脑吧。
以本文案例为例,将进度管理(上传)(督办)
的内容中的()
去掉,所以可以将其内容改为进度管理-上传-督办
。
本文作者:DingDangDog
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!