本文作者:心月

移动端UC浏览器a标签兼容性问题【原创】

心月IT博客 2020-09-06
移动端UC浏览器a标签兼容性问题【原创】摘要:a标签兼容性问题?看到这个标题一定很吃惊吧,准确的说是 a 标签加 >> 兼容性问题。目前在华为、vivo手机中会有这个问题,而且只在uc浏览器中会出现,苹果手机没有这个问题,但这不能说明安卓手机都有这个问题,因为测试了一台安卓索尼手机,也没有这个问题。

    a标签兼容性问题?看到这个标题一定很吃惊吧,准确的说是 'a' 标签加 '>>'  兼容性问题。心月博主也是在前不久调试项目的时候发现的,项目在pc端、苹果手机上运行没有发现任何异常,但在华为手机的uc浏览器打开页面,却发现有两个a标签链接的的样式完全变了。

    诡异的是,在某度搜了一圈也没看关于过这个问题的文章。

uc浏览器a标签兼容性问题


    后来经过多次测试终于找到了这个诡异问题的根源。

    原来UC浏览器给a标签里的内容加了一个 ucspan 标签,而且还给这个标签加了颜色样式。

uc浏览器a标签兼容性问题

    相信对很多人来说,这是一个陌生的标签,而且在 W3C 标准中也没有这个标签,这对前端人员来说是一件非常恐怖的事,想想,你辛辛苦苦写的代码,结果你解析页面的时候把我写的标签完全给修改了,那这还是我写的代码吗?

    下面心月博主就来说说这个诡异的问题是如何产生的:

    当页面上有的 'a' 标签内 出现了 '&gt;&gt;'(其它标签不会出现这个问题),这个页面内最后一个满足这两个条件的a标签内的文本会被加上 '<ucspan style="color:#00b500;"></ucspan>',这个标签,并且页面内 其它 a 标签如果 href 值与这个标签一样,那么这个 a 标签内也会被加上 ucspan 标签和颜色属性,而这个改变是在页面加载完成后稍等一会才出现的,而且不管 这个 a 标签内的文本被什么标签包住,这个标签都会被替换成 ucspan。

    但如果满足上面的两个条件,同时还满足下面的某一个条件,这个 a 标签就不会被加上 ucspan 标签:

    1、 '&gt;&gt;' 如果这两个转义实体中内部有空格,则不会被加上 ucspan;,同时会上一个有 '&gt;&gt;' 的 a 标签会出现上述兼容问题。

    2、如果这个 a 标签的部分文本被标签包住,则这个 a 标签不会被兼容问题牵连,但其他满足条件的 a 标签还是会受到兼容问题的牵连。

    3、如果这个 a 标签内出现单标签,则这个 a 标签也不会被牵连。

    4、如果这个 a 标签的 href 值是 js 脚本,它也不会被兼容问题牵连。

    除了上述4个方法,其实还有一种方法可以解决这个问题,那就是在页面加载完成后,通过执行一会定时任务,如果发现 ucspan ,就把 ucspan 替换回原来的标签。如果定时任务执行一会后没发现 ucspan,那就说明不会有这个兼容问题,可以结束定时任务了。

    关于uc浏览器 a 标签的这个兼容问题就介绍到这了。

    老实说,这个兼容问题很没道理,而且还有点作死的感觉。

文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2020-09-06
若转载请注明原文及出处:https://www.xinyueseo.com/webfe/618.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 0 条评论,人围观)参与讨论