Valine 评论选填 url 跳转错误

510°C 15-03-2020
最近更新于:2022-06-16 00:18:10

文章摘要chatGPT

standby chatGPT responsing..

错误的跳转链接

据热心网友 @Zsedczy 反馈(滑稽)使用评论的时候的选填项url填写时如果包含 http(s):// 会导致链接跳转出错(valine会输出重复的 http(s):// url)

刚开始看了下源码,因为修改过所以以为是改了源码的问题,但其实是valine原本就存在的问题。

其实 Valine 默认是不输出 http:// 到 url 的,但是这本身会导致一个问题就是:如果不填(http(s)://)链接会以当前域名做跳转导致404,所以需要稍微调整一下。

思路

点击跳转页面时,判断当前用户输入的url是否与自带 http(s):// 的源码冲突,是则重写url,否则不处理。

本例使用的是鼠标移入 mouseenter 行为,不用遍历是因为评论是动态插入的,需要 on 做动态元素处理。重写过程:鼠标移入链接,判断链接,修改链接。

$('.content-all').on('mouseenter','.v .vlist .vcard .vhead a.vnick',function(){
    let _this = $(this),
        _thisLink = _this.attr('href');
    if(!_this.hasClass('reUrl')){
        _this.addClass('reUrl');
        let _thisLinkLen = _thisLink.length;
        if(_thisLink.match('http://http://')){
            _thisLink = _thisLink.substr(14,_thisLinkLen);
            _this.attr('href','http://'+_thisLink);
        }else if(_thisLink.match('http://https://')){
            _thisLink = _thisLink.substr(15,_thisLinkLen);
            _this.attr('href','https://'+_thisLink);
        }
    }
});

已知存在的bug

  • 移动端第一次点击链接不会跳转,第二次之后才会执行(遍历不会造成该问题)
  • 0

该bug可用的解决方案

setTimeout一个定时器在定时器规定时间内查找并操作动态加载的dom直到操作完成,移除定时器。


评论留言

既来之则留之~ 欢迎在下方留言评论,提交评论后还可以撤销或重新编辑。(Valine 会自动保存您的评论信息到浏览器)