错误的跳转链接
据热心网友 @Zsedczy 反馈(滑稽)使用评论的时候的选填项url填写时如果包含 http(s):// 会导致链接跳转出错(valine会输出重复的 http(s):// url)
刚开始看了下源码,因为修改过所以以为是改了源码的问题,但其实是valine原本就存在的问题。
其实 Valine 默认是不输出 http:// 到 url 的,但是这本身会导致一个问题就是:如果不填(http(s)://)链接会以当前域名做跳转导致404,所以需要稍微调整一下。
思路
点击跳转页面时,判断当前用户输入的url是否与自带 http(s):// 的源码冲突,是则重写url,否则不处理。
本例使用的是鼠标移入 mouseenter
行为,不用遍历是因为评论是动态插入的,需要 on
做动态元素处理。重写过程:鼠标移入链接,判断链接,修改链接。
代码语言:javascript
复制
$('.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直到操作完成,移除定时器。