订阅本栏目 RSS您所在的位置: 深山工作室 > uni-app > 正文

uniapp的rich-text组件注入的a标签点击跳转处理

2020/9/15 15:45:46 字体: 浏览 7861

关于rich-text组件动态注入的HTML代码中包含a标签 不能点击跳转

以下是有问题的部分
nodes: [{
name: 'div',
attrs: {
class: 'div-class',
style: 'line-height: 60px; color: red; text-align:center;',
onclick: 'javascript:alert(222)'
},
children: [{
type: 'text',
text: 'Hello uni-app!'
}]
这样注入onclick事件也执行不了。。。。rich-text组件

解决方法:

可以将rich-text组件换成uParse组件,uParse组件可以实现动态注入a标签跳转

<uParse :content="strings" @preview="preview" @navigate="navigate" />

navigate就是点击跳转方法

在method中加上navigate函数:

navigate(href, e) { 
    //比如点击a标签,打开某个webview并传输url 
     uni.navigateTo({ 
        url: '/pages/goodsDetail/webView?url=' + href 
     }) 
}

相关阅读
让你的Pycharm和电脑pip install下载速度飞起来
另外一种符合web2.0的链接打开方式--利用base打开链接
JS+CSS实现图片放大预览效果(购物时放在产品上面预览图片)
asp页面ip防火墙限制(判断ip内网还是外网)功能
ASP利用fso读取文件夹里所有文件的名字
uni-app微信小程序分享微信好友与分享到朋友圈功能
通过阿里云服务接口获得ip地址详细信息
苏欧装饰
更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>同类信息
uni-app开发表单input组件的一些规则说明自己预留使用
uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
微信小程序打开客服提示:该小程序提供的服务出现故障,请稍后重试
微信小程序客服会话只能过button让用户主动触发
uni-app开发微信小程序使用button的open-type为contact调用微信客服不能用view或者js调用
更多>>最新添加文章
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
更多>>随机抽取信息
防止 IE 浏览器被黑的技巧十则
网站从http改成https(ssl证书)后设置301跳转将http跳转到https的方法
模板自由切换
删除程序页面代码中的注释标签
对access数据表进行操作
JS操作Cookie记录