vue:点击a链接跳转一个嵌套iframe的页面
有这么一个需求:后台给的html字符串,v-html渲染出来了(左1),用户点击链接后放在iframe嵌套下的新页面思路1:查找所有的a标签添加οnclick="consoel.log(1234567);return false;"或@click.prevent=“consoel.log(1234567);return false;”let html = this.$route.query.con
·
有这么一个需求:后台给的html字符串,v-html渲染出来了(左1),用户点击链接后放在iframe嵌套下的新页面
思路1:
查找所有的a标签添加οnclick="consoel.log(1234567);return false;"或@click.prevent=“consoel.log(1234567);return false;”
let html = this.$route.query.content
// 1.查找所有a链接的位置
var index = html.indexOf('<a') // 字符出现的位置
var num = 0 // 这个字符出现的次数
var arr = []
while (index !== -1) {
console.log(index) // 打印字符串出现的位置
arr.push(index)
num++ // 每出现一次 次数加一
index = html.indexOf('<a', index + 1) // 从字符串出现的位置的下一位置开始继续查找
}
console.log(num)
// 2.添加绑定事件
// console.log('f一共出现了' + num + '次');
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
// Vue._router.push({ path: "infoDetail2", query: { url: "" } })
this.insertStr(html, arr[i] + 2, ' οnclick="consoel.log(1234567);return false;"')
}
this.html = html
后面发现onclick没有被解析所以无法执行
(其实我很奇怪,普通的html页面都能执行,可能和v-html渲染有关)
< a href=“https://www.baidu.com” οnclick=“console.log(‘要执行的代码’);return false”>baidu
思路2:
转换思路了,给v-html添加点击事件,为指定元素(a标签)做处理
<div v-html="html" @click.prevent="clickFn"></div>
clickFn (event) {
console.dir(event.target) // testssss
console.log(event.target.nodeName) // p
if (event.target.nodeName === 'A') {
// 获取触发事件对象的属性
let href = event.target.href
this.$router.push({
path: 'infoDetail2',
query: {
src: href
}
})
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)